How do we set state in component while using react final form

Question

I am using react final form to validate my form and it working fine. I am calling on change handler to set input field state but seems it is not setting the state.How can we achieve it in react final form.

I have tried to pass onchange handler as props in InputType but then react final form validations does not work as intended

import {Form, Field} from 'react-final-form';
class UserDetails extends Component {

    state = {
      firstName: '',
      lastName: '',
      emailAddress: '',
      password: '',
      confirmPassword: '',
    }

showConsentForm = () =>

     Here I want to get  each field value but they are coming blank.

It looks to me that `setUserDetails` is never getting called using react-final-form

 setUserDetails = (e) => {
      const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
      this.setState({[e.target.name]: value})
    }

render () {
      const {t: translate} = this.props;

      return (
        <Form
          onSubmit={() => this.showConsentForm()}
          render={({handleSubmit, invalid}) => (
            <form onSubmit={handleSubmit}>
              {this.state.showDetailsPage && <div>
                <div className="hw-block hw-block--mb">
                  <h2>{translate('register.heading')}</h2>
                </div>
                <div className="hw-block hw-block--mb">
                  <h4>{translate('register.detailsPageText')}</h4>
                </div>
                <p>{translate('register.firstName')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <Field type="text" value={this.state.firstName} component={InputType} validate={composeValidators(required, fieldLength(2, 60))}
                    placeholder={translate('register.firstNamePlaceholder')} name="firstName"
                    onChange={(e) => {
                      const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
                      this.setState({[e.target.name]: value})
                    }}/>
                </div>
                <p>{translate('register.surname')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <Field type="text" value={this.state.lastName}
                    placeholder={translate('register.surnamePlaceHolder')} component={InputType} validate={composeValidators(required, fieldLength(2, 60))}  name="lastName"
                    onChange={(e) => this.setUserDetails(e)}/>
                </div>
                <p>{translate('register.email')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <Field type="email" value={this.state.emailAddress}
                    placeholder={translate('register.emailPlaceHolder')} component={InputType} validate={composeValidators(required, validateEmail)} name="emailAddress"
                    onChange={(e) => this.setUserDetails(e)}/>
                </div>
                <p>{translate('register.password')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <div className="hw-password" data-hw-password>
                    <Field type="password" value={this.state.password}
                      placeholder={translate('register.passwordPlaceHolder')} component={InputType} validate={required} name="password"
                      onChange={(e) => this.setUserDetails(e)}/>

                  </div>
                </div>
                <p>{translate('register.confirmPassword')}</p>
                <div className="hw-block hw-block--mb-smaller">
                  <div className="hw-password" data-hw-password>
                    <Field type="password" value={this.state.confirmPassword} component={InputType}
                      placeholder={translate('register.confirmPasswordPlaceHolder')} validate={required}
                      name="confirmPassword" onChange={(e) => this.setUserDetails(e)}/>

                  </div>
                </div>

                <div className="hw-block hw-block--mb-smaller">

                  <label className="hw-checkbox">
                    <p className="hw-text-small">{translate('register.accept')} <a target="_blank"
                      href="https://abcd/etc"
                      className="hw-link">{translate('register.terms')}</a> {translate('register.conditions')}
                    </p>
                    <input type="checkbox" name="acceptTerms" onClick={(e) => this.setUserDetails(e)}/>
                    <i className="hw-checkbox__indicator"></i>
                  </label>
                </div>
                <div className="hw-block hw-block--mb-smaller">
                  <button className="hw-button hw-button--primary" disabled={invalid} >{translate('register.continue')}</button>
                  <button className="hw-button hw-button--secondary secondary-button-margin"
                    onClick={homePage}>{translate('register.cancel')}</button>
                </div>
              </div>}

            </form>)}
        />
      )
    }
}

const InputType = ({
  input,
  type,
  placeholder,
  value,
  meta: { touched, error },
}) => (

  <React.Fragment>
    <input {...input} type={type} value={value} placeholder={placeholder}
      className={(error) ? 'hw-input--error hw-input' : 'hw-input' }/>
    { touched && error &&
        <span className="hw-error">
          {error}
        </span>
    }
  </React.Fragment>
)```

Answer 1

React Final Form handles all your value storage for you. You shouldn't need to be doing any of this onChange stuff. That's the primary job of React Final Form: to manage your form values so you don't have to be setStateing all the time. It's not really clear to me what you're trying to accomplish, so I can't really help you further. RFF has all of that e.target.type === 'checkbox' logic built in.