React: setting state and default input from prop

Question

I'm creating a app that allows users to create assessments (that other users can complete). Right now I am working on an 'edit' page, where a users loads a form that is prefilled with the relevant data - but he is then able to change these values.

However, I am having trouble with two things (that I suspect are related). First: the input fields wont display a default value that is derived from the component state.

Second: If I set the input fields directly from the props I am no longer able to change the values.

The components gets passed a prop that is called block_data which is a dict containing key/value pairs of strings.

I'm attempting to convert load it into the state like so

constructor(props) {
    super(props);

    this.state = {
        block: this.props.block_data,
        question_list: [],
        question_options: ['BO', 'SC', 'SR', 'NO'],
        block_list: [],
    };
    (..)
}

However, this does not work. When I check in the chrome react extension the state is not set.

The input fields are all very simular to the example I've included below. Here I've set its value from the props. In this case it does display the correct initial data. But I am unable to edit it.

<input 
  onChange={e => this.changeIsANaturalPartOfLife(e)}
  value={this.props.block_data.title}
  name="title"
  />

Below is the 'on change' function. When I check the chrome react tool, I can see that only the first letter of the state is updated when I start typing. The input field does not show any changes.

changeIsANaturalPartOfLife(e, optional) {

    const target = e.target;
    const name = target.name;
    const value = target.value;
    console.log(value);
    this.setState({ block: {[name]: value }});

}

I am really at a loss here on what to do. What I am trying to do here seems simple enough, yet I'm unable to advance beyond this flawed stage. Does anyone have an idea what I am doing wrong?

are you getting the data (data you are showing in input field) from server? — Mayank Shukla
– Mayank Shukla, Commented Dec 12, 2017 at 14:37
To be able to change the input value, you need to refer the state, instead of props: value={this.state.block.title} — Héctor Valls
– Héctor Valls, Commented Dec 12, 2017 at 14:37
@MayankShukla, yes - the data is loaded from a DjangoRestAPI. — Jasper
– Jasper, Commented Dec 12, 2017 at 14:40

Mayank Shukla · Accepted Answer · 2017-12-12 14:57:01Z

As you mentioned in comment: "the data is loaded from a DjangoRestAPI".

Solution of first problem:

You need to use componentwillreceiveprops lifecycle method to update the state with new props values (after successfully fetched from server) otherwise state of child component will always have the initial data of parent component.

As per DOC:

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

Use this method:

componentwillreceiveprops(nextProps) {
   // compare nextProps.block_data and this.state.block if not equal
   this.setState({
       block: nextProps.block_data
   })
}

Solution of second problem:

When you are directly using the props instead of storing into state, then you need to update the value in parent component during onChange, because you are using this.props.value and updating this.state.value, and hence props.value will always be same and it will not allow you to type anything.

Collectives™ on Stack Overflow

React: setting state and default input from prop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related