React passing new props

Question

So I update my state in a component 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 component:

import React, { Component } from 'react';

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

  componentWillReceiveProps(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...

Possible duplicate of [React input defaultValue doesn't update with state](https://stackoverflow.com/questions/30146105/react-input-defaultvalue-doesnt-update-with-state) — Panther, Oct 25 '17 at 06:24
Slightly different, figured it out before bed will post solution tonight when I get home :) — SharpCode, Oct 26 '17 at 00:51

Vivek Doshi · Accepted Answer · 2017-10-25T05:21:02.583

7

Issue is inside the componentWillReceiveProps:

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.com/edit/react-parent-child-prop

edited Oct 25 '17 at 05:21

answered Oct 25 '17 at 04:58

Vivek Doshi

56,649
12
110
122

This worked except the input value is still not updating, the state changes though – SharpCode Oct 25 '17 at 05:04
found something similar here https://stackoverflow.com/questions/43976513/componentwillreceiveprops-in-child-doesnt-receive-new-props-when-setstate-in?rq=1 – Cijo V J Oct 25 '17 at 05:05
hmm yeh last issue is the defaultValue field not changing despite state changing though – SharpCode Oct 25 '17 at 05:12
If a value is available inside a component as prop, there is no need to transfer it to state and then use that state. It adds unnecessary complexity to your code and is a wasteful practice. – anand Oct 25 '17 at 05:15

anand · Answer 2 · 2017-10-25T05:35:48.643

0

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

edited Oct 25 '17 at 05:35

answered Oct 25 '17 at 04:55

anand

565
2
9

score 0 · Answer 3 · answered Jun 01 '19 at 15:39

0

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

answered Jun 01 '19 at 15:39

Ren

944
1
13
26

score 0 · Answer 4 · answered Apr 19 '20 at 22:00

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 componentWillReceiveProps, now is known as UNSAFE_componentWillReceiveProps 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;
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.someValue !== this.props.someValue ) {
      this.setState({
        someState: this.props.someValue ,
      });
    }
  }

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

That is the correct way of Update a component.

Ref: Replacing ‘componentWillReceiveProps’ with ‘getDerivedStateFromProps’

score -1 · Answer 5 · answered Oct 25 '17 at 06:21

-1

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

React Passing

answered Oct 25 '17 at 06:21

Tu Tran

458
3
9

React passing new props

5 Answers5