State tracking for conditional rendering in form anti-pattern

index.md

A common situation is rendering a form input iff some condition has been met. As an example, a user selects other from a gender dropdown and a text input is rendered so they can specify.

// how we commonly address this use-case
class Example extends React.Component {
  state = { gender: null } //tracking form state in component
  onGenderChange = e => this.setState({ gender: e.target.value }) //updating form state outside of form
  render() {
    const { gender } = this.state
    return (
      <Formsy.Form>
        <select name="gender" onChange={this.onGenderChange}>
          <option value="M">Male</option>
          <option value="F">Female</option>
          <option value="O">Other</option>
        </select>
        
        {gender === "O" && <input name="other_gender" type="text" />}
      </Formsy.Form>
    )
  }
}

The problem with the above example is that we are in effect tracking and updating values when a form library does that same work.

function ImprovedExample() {
  return (
    <Form render={() => (
        <form>
          <Field name="gender" render={() => (
            <select>
              <option value="M">Male</option>
              <option value="F">Female</option>
              <option value="O">Other</option>
            </select>
          )}/>
          <Condition when="gender" is="O">
            <Field name="other_gender" render={() => <input name="other_gender" type="text" />}/>
          </Condition> 
        </form>
    )}/>
  )
}

Adapted from the example from the react-final-form README

https://github.com/final-form/react-final-form#conditional-fields