ReactJS - How to properly initialize state from props which is populated by fetching data?

Question

Here is my editing component:

class EditField extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }
  edit(e) {
    this.setState({ value: e.target.value });
    if (e.keyCode === 13) {
      this.props.onEdited(this.state.value);
    }
  }
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={this.edit.bind(this)}
        />
      </div>
    )
  }
}

I need to populate state from props like this:

function Container({ entity, onEdited }) {
  return (
    <div>
      <EditField onEdited={onEdited} value={entity.firstName} />
      <EditField onEdited={onEdited} value={entity.lastName} />
    </div>
  );
}

The Container component get onEdited and entity props from redux store. Container's parent will handle data fetching and onEdited (which will only be triggered if user hit Enter) will dispatch request to the server.

My problem is how to initialize value props properly? Because if I use:

  componentDidMount() {
    this.setState({
      value: this.props.value
    });
  }

I got empty state because fetching data is not finished when componentDidMount called. And if I use:

  componentWillReceiveProps(nextProps) {
    this.setState({
      value: nextProps.value
    });
  }

I got this warning:

Warning: EditField is changing a controlled input of type text to be
unncontrolled. Input elements should not switch from controlled to
uncontrolled (or vice versa). Decide between using a controlled or
uncontrolled input element for the lifetime of the component.

So, how to do this correctly?

Answer 1

This is what I recommend:

• You could use getInitialState from EditField to populate the value state from the value prop. But this won't work, because getInitialState will only be called once, so subsequent renders will not update the state. Besides, this is an anti-pattern.
• You should make the EditField component controlled. Always pass the current value as prop and stop dealing with state at all. If you want a library to help you link the input state with Redux, please take a look at Redux-Form.
• The onEdited event you created, at least the way you did it, doesn't play well with controlled inputs, so, what you want to do is to have an onChange event that is always fired with the new value, so the Redux state will always change. You may have another event triggered when the user hits enter (e.g onEnterPressed), so you can call the server and update the entity values. Again. Redux-Form can help here.
• Apparently entity.firstName and entity.lastName can only contain the values that the user has confirmed (hit enter), not temporary values. If this is the case, try to separate the state of the form from the state of the entity. The state of the form can be controlled by Redux-Form. When the user hits enter, you can trigger an action that actually calls the server and updates the state of the entity. You can even have a "loading" state so your form is disabled while you're calling the server.

Answer 2

Since Container subscribes to Redux store, I suggest make the EditField stateless functional component. Here's my approach:

const EditField = ({
  onEdited,
  value
}) => (
    <div>
      <input
        type="text"
        value={value}
        onChange={onEdited}
      />
    </div>
);

class Container extends React.Component {

  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

  edit = (e) => {
    this.setState({value: e.target.value});
    e.keyCode === 13 ? this.props.onEdited(this.state.value) : null;
  };

  sendValue = (val) => val ? val : this.state.value;

  render() {
    this.props = {
      firstName: "Ilan",
      lastName: null
    }
    let { firstName, lastName, onEdited } = this.props;
    return (
      <div>
        <EditField onEdited={this.edit} value={this.sendValue(firstName)} />
        <EditField onEdited={this.edit} value={this.sendValue(lastName)} />
      </div>      
    )
  }
}

ReactDOM.render(<Container />, document.getElementById('app'));

A live demo: https://codepen.io/ilanus/pen/yJQNNk

Container will send either firstName, lastName or the default state...