Field of Redux-Form not editing

Question

I have this Field from Redux-Form:

          <Field
            name="hours"
            type="number"
            initialValue="100"
            placeholder="Ingrese las horas para esta categoría"
            component={RenderInput}
            onChange={(event) => {
              handleSubmit(currentValues => this.debounceSubmitProduction({
                ...currentValues,
                hours: event.target.value,
              }))();
            }}
          />

And I wanted to pass an initial value to an Input component initialValue="100" but now, the value appears in the input but I'm not able to edit it.

This is my RenderInput component:

const RenderInput = ({
  input,
  type,
  disabled,
  readOnly,
  placeholder,
  meta: { touched, error },
  onKeyDown,
  innerRef,
  initialValue,
}) => (
  <div>
    <input
      {...input}
      type={type}
      value={initialValue}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
      className={`font-300 ${touched && error && 'has-error'}`}
      onKeyDown={onKeyDown}
      ref={innerRef}
    />
  </div>
);

How can I edit the initial value passed to the input?

Answer 1

The issue is that you're setting the value equal to initialValue which does not change when you type. You'll want to set the initial value in the redux-store when you're component is initialized and then set the value prop equal to the value returned from the store. onUpdate will update the store, and should then update the UI to reflect the change.