React Final Form. How to set field value from component state

5
votes

I'm trying to add a date picker to my forum. Problem is the date picker only works through the component state. meaning that the picked values go into the state.

I'm trying to force a final form field to use that state value. But I can't seem to figure it out.

Basically trying to to this:

<Field name="field1" value={this.state.date}/>
2
reactjsreact-final-formfinal-form

2 Answers

4
votes

Ummmmm, I'm going to assume you wan't to set an initial value that the end user can change. Please let me know if this is not the case.

If you wan't to force a value, don't use a field. React-final-form maintains state so you don't have to.

To set an initial value, use initialValues property in the Form control.

 <Form
      onSubmit={onSubmit}
      initialValues={{ field1: "2019-02-02" }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>Feild One</label>
            <Field name="field1" component="input" type="date" />
          </div>
          .
          .
          .

Edit 🏁 React Final Form - Simple Example

0
votes

Do you mean you already have a date picker component that you want react-final-form to be able to access that component's state? If that is the case, have you considered using the render-props version of the Field component?

In your form that would look like this:

<Field name="datePickerField">
  {({ input }) => (
    <DatePickerComponent
      onChange={date => input.onChange(date)}
    />
  )}
</Field>

and then inside the DatePickerComponent - where you handle setting state for the selected date, you would also call props.onChange(date).