So I update my state in a ponent and then pass the new props into the child but the child isn't updating correctly and the defaultValue of the input is not changing. At first I thought it might be because I am using this.props so begun using this.states and applying the new props there first but doesn't seem to be working.

Parent Component

this.state.newDetails == null ? '' : 
    <NewDetailsView details={this.state.newDetails} /> 

Child ponent:

import React, { Component } from 'react';

class NewDetailsView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: (this.props.details!= null) ? this.props.details: null
    }
  }

  ponentWillReceiveProps(nextProps) {
    this.setState({ details: nextProps });
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <input type="text" defaultValue={this.state.details.id} />
      </div>
    );
  }
}

export default NewDetailsView ;

Solution Code:

Pending...

So I update my state in a ponent and then pass the new props into the child but the child isn't updating correctly and the defaultValue of the input is not changing. At first I thought it might be because I am using this.props so begun using this.states and applying the new props there first but doesn't seem to be working.

Parent Component

this.state.newDetails == null ? '' : 
    <NewDetailsView details={this.state.newDetails} /> 

Child ponent:

import React, { Component } from 'react';

class NewDetailsView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: (this.props.details!= null) ? this.props.details: null
    }
  }

  ponentWillReceiveProps(nextProps) {
    this.setState({ details: nextProps });
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <input type="text" defaultValue={this.state.details.id} />
      </div>
    );
  }
}

export default NewDetailsView ;

Solution Code:

Pending...

• javascript
• reactjs
• react-props

Share Improve this question Follow edited Oct 25, 2017 at 5:09 SharpCode asked Oct 25, 2017 at 4:46 SharpCodeSharpCode 1,46533 gold badges1313 silver badges2929 bronze badges 2

• Possible duplicate of React input defaultValue doesn't update with state – Panther Commented Oct 25, 2017 at 6:24
• Slightly different, figured it out before bed will post solution tonight when I get home :) – SharpCode Commented Oct 26, 2017 at 0:51

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

Issue is inside the ponentWillReceiveProps:

this.setState({ details: nextProps });

it should be :

this.setState({ details: nextProps.details });

And also remove this.forceUpdate(); , there is no need of forceUpdate here.

---

Sultion to second issue change defaultValue to just value :

<input type="text" value={this.state.details.id} />

---

Here is the link to working example :

https://stackblitz./edit/react-parent-child-prop

const NewDetailsView = ({details}) => (
  <div>
    <input type="text" value={details? details.id: null} />
  </div>
);

Use getDerivedStateFromProps instead of using deprecated ponentWillReceiveProps. An example of it can be found here

maybe as me you got into this question, In React v16.3.0 some methods became legacy (deprecated), in this example do not use this ponentWillReceiveProps, now is known as UNSAFE_ponentWillReceiveProps and can lend you through errors and bugs.

Instead look a the example below:

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.someValue !== prevState.someValue) {
      return {
        someState: nextProps.someValue,
      };
    } else return null;
  }
  ponentDidUpdate(prevProps, prevState) {
    if (prevProps.someValue !== this.props.someValue ) {
      this.setState({
        someState: this.props.someValue ,
      });
    }
  }

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

That is the correct way of Update a ponent.

Ref: Replacing ‘ponentWillReceiveProps’ with ‘getDerivedStateFromProps’

defaultValue only works for the initial load. You should controller input and use props to get value (don't need setState).

React Passing