redux-form How to have initial value in the input field

Question

I use redux-form for my form, following the example: https://redux-form.com/8.3.0/docs/api/fields.md/

So the <Fields /> is like so:

<Fields
  names={['firstName', 'lastName']}
  component={input}
  validate={{
    firstName: (value, allValues, props, name) => 'error'
  }}
  warn={{
    lastName: (value, allValues, props) => 'warning'
  }}
/>

the fields component that i render is this

const renderFields = (fields) => (
  <div>
    <div className="input-row">
      <input {...fields.firstName.input} type="text"/>
      {fields.firstName.meta.touched && fields.firstName.meta.error &&
       <span className="error">{fields.firstName.meta.error}</span>}
    </div>
    <div className="input-row">
      <input {...fields.lastName.input} type="text"/>
      {fields.lastName.meta.touched && fields.lastName.meta.error &&
       <span className="error">{fields.lastName.meta.error}</span>}
    </div>
  </div>
)

So far so good, the form displays the 2 input fields and i can add values into them.

But how do i pass default values into the input's?

When i add the value property into the input , i cant edit the input afterwards.

For example, i add the value prop with a value like so:

const renderFields = (fields) => (
  <div>
    <div className="input-row">
      // add value="my name"
      <input {...fields.firstName.input} type="text" value="my name" />
      {fields.firstName.meta.touched && fields.firstName.meta.error &&
       <span className="error">{fields.firstName.meta.error}</span>}
    </div>
    <div className="input-row">
       // add value="my last name"
      <input {...fields.lastName.input} type="text" value="my last name" />
      {fields.lastName.meta.touched && fields.lastName.meta.error &&
       <span className="error">{fields.lastName.meta.error}</span>}
    </div>
  </div>
)

In that way, the inputs have always the same init value. Any help on how to have default value and also be able to edit it, thank you.

Answer 1

When you provide the value prop you will need to provide onChange function as well and handle the state - https://reactjs.org/docs/forms.html#controlled-components

and from redux-form docs: https://redux-form.com/8.3.0/docs/api/field.md/#-code-onchange-event-newvalue-previousvalue-name-gt-void-code-optional-

Answer 2

You need a state variable to hold the input value.

const [inputValue, setInputValue] = useState('');

In the input tag, use the previously declared state variable as value & in onChange of input, set the input value to the target value.

<input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />

Answer 3

You can use prop defaultValue, as mentioned in Redux Form documentation: https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#props

<Field component={your custom component} defaultValue={}/>