How to fill out or populate a react redux form with values that I get from a server?

Question

I am using a redux form in order to edit information about tasks, therefore I fetch data from a server and want to use it in the form. How to fill out or populate correctly this form and then edit it. I tried to fill out the form's fields, for example value={task.text}. But after that the form doesn't allow me to modify the form element.

<Form className='m-10' model="editTask" encType="multipart/form-data" onSubmit={(values)=> this.handleSubmit(values)}>
  <Row className="form-group ml-1">
    <strong>Done? </strong>{' '}
    <Col md={{ offset: 1 }}>
    <Control.checkbox model=".status" name="status" className="form-check-input" /> Old value: {task.status === 0 ? 'Pending...' : 'The Task Was Done'}
    </Col>
  </Row>
  <Row className="form-group ml-1">
    Your Task
    <Col md={10}> Old value: {task.text}
    <Control.textarea model=".text" name="text" rows="12" className="form-control" />
    </Col>
  </Row>
  <Row className="form-group ml-1">
    <Col md={{ size: 10, offset: 1 }}> {task.username === '' ? 'Edit' :
    <Button type="submit" color="primary">Edit </Button> }
    </Col>
  </Row>
</Form>

Answer 1

You'll want to create a handleChange method in your component.

handleChange(evt) {
   this.setState({
      [evt.target.name]: [evt.target.value]
   });
}

Make sure your state property is equal to the evt.target.name! You'll then want to bind this in your constructor.

this.onChange = this.onChange.bind(this);

Finally, in the form of concern, you'll want to create an onChange property and pass in your handleChange method.

<YourInputField onChange={this.handleChange} (and whatever other properties you have) />

This will allow you to modify the form. At the moment, your value is static because it's dependent on the state, which at the moment isn't changing.

So you can update your state with the data your pulling in from the server, THEN you can set the value of your form to be equal to that state property, and at that point, the handler will change your state which will change your input for you.

Answer 2

As for me, I solved this problem. I used a Redux action generator called actions.merge. At first, It didn't work because I tried to invoke it from the child component. But I should have done it in the MainComponent.js file in the componentDidUpdate hook.

In the ActionCreators.js I declared:

import actions from 'react-redux-form';
...

export const setDefaultFormValues = (values) => (dispatch) => {
  dispatch(setDefaultUser: (values) => actions.merge(‘editTask’, values));
}

In the MainComponent.js I wrote:

…
import {
  setDefaultValues
} from '../redux/ActionCreators';

const mapDispatchToProps = dispatch => ({
  ...
  setDefaultValues: (values) => dispatch(setDefaultValues(values))
});

componentDidUpdate() {
  let pathname = this.props.location.pathname;
  let pos = pathname.search("/edit/") + 6;
  let taskId = pathname.substring(pos, pathname.length);
  if (taskId) {
    let tasks = this.props.tasks.tasks.tasks;
    if (tasks) {
      let task = tasks.filter(task => task.id === parseInt(taskId, 10))[0];
      if (task) {
        this.props.setDefaultValues(task);
      }
    }
  }
}