Handling State of React forms

Question

I have 2 components - MasterList and DetailComponent

1. Clicking a value in MasterList sends data to input element in DetailComponent.
2. Detail component shows the prop passed
3. Detail component should be able to also update the input value

Step 1 and 2 are working , not able to understand how to deal with Step 3.

Following is the Sample code - Codesandbox

Answer 1

You could initialize the form state with the props it receives. The input can be assigned the value of the state. Change in the input can change the state.

A submit button could be added which would take the state values to update the data. In this case you might want to remove the componentDidUpdate code and add it to your handleSubmit method.

constructor(props) {
    super(props);

    this.state = {
      username: props.user.username
    };
  }

handleSubmit = () => {
    const { dispatch } = this.props
    let payload = {
      username: this.state.username
    };

    dispatch(updateUser(payload));
  };

updateState = (key, value) => {
    this.setState({
      [key]: value
    });
};

<input
  type="text"
  value={this.state.username}
  onChange={val => this.updateState("username", val)}
/>