How to set state from props that is passed to the component in react?

Question

I have this simple component, initialPlayers props is passed to App component.

import React from 'react';
import ReactDOM from 'react-dom';

var PLAYERS = [
  {
    name: "xyz",
    score: 123
  }
];

// App component
class App extends React.Component {

 constructor() {
   super();
 }

 componentDidMount() {
   this.state = {
     players: this.props.initialPlayers
   }
 }

 render() {    
   return(
     <div>
       <Header players={this.state.players} />
     </div>
   );
 }
}

// Render component
ReactDOM.render(<App initialPlayers={ PLAYERS }/>, 
document.getElementById('root'));

Have this error in console, and not able to pass value to Header component as {this.state.players}. Any idea?.

Uncaught TypeError: Cannot read property 'players' of null
at App.render (bundle.js:14379)
at bundle.js:20173
at measureLifeCyclePerf (bundle.js:19452)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:20172)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:20199)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:19739)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:19635)
at Object.mountComponent (bundle.js:4667)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:19748)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:19635)

Possible duplicate of [React component initialize state from props](https://stackoverflow.com/questions/40063468/react-component-initialize-state-from-props) — Jalal, Dec 11 '17 at 18:52

score 8 · Accepted Answer · answered Apr 26 '17 at 02:58

8

Move the setting players line into your constructor():

constructor(props) {
  super(props);
  this.state = {
    players: this.props.initialPlayers
  };
}

answered Apr 26 '17 at 02:58

thinhvo0108

2,212
1
13
23

This is how Facebook does it as shown in their documentation: https://reactjs.org/docs/react-component.html#constructor – tim-phillips Dec 06 '17 at 19:32
Wow this is so obvious now, I need to alter state on a previous screen and this works perfect – Amon Feb 01 '22 at 05:52

score 1 · Answer 2 · answered Apr 25 '17 at 21:19

You want to use componentWillMount because it runs before the component's first render – compare that to the description of componentDidMount

var PLAYERS = [
  { name: "xyz", score: 123 },
  { name: 'abc', score: 111 },
  { name: 'def', score: 222 }
];

const Header = ({players}) =>
  <ul>{players.map(({name,score}) =>
    <li><span>{name}</span><span>{score}</span></li>)}</ul>

// App component
class App extends React.Component {

  // get rid of constructor if you're not doing anything with it
  // constructor() { ... }

  // use componentWillMount instead of componentDidMount
  componentWillMount() {
    this.setState({
      players: this.props.initialPlayers
    })
  }

  // don't wrap everything in a div if it's not necessary
  render() {    
    return <Header players={this.state.players} />
  }
}

// Render component
ReactDOM.render(<App initialPlayers={ PLAYERS }/>, 
document.getElementById('root'));

span {
  display: inline-block;
  font-weight: bold;
  margin-right: 1em;
}

span ~ span {
  font-weight: normal;
}

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

<div id="root"></div>

score 0 · Answer 3 · answered Apr 25 '17 at 21:21

First you need to initialize your state otherwise you'll get error updating it's value, then you have to use setState method to change it (this is the recommended way to update state in react)

import React from 'react';
import ReactDOM from 'react-dom';

var PLAYERS = [
  {
    name: 'xyz',
    score: 123
  }
];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      players: []
    };
  }
  componentDidMount() {
    this.setState({
      players: this.props.initialPlayers
    });
  }
  render() {
    return(
      <div>
        <ul>
          {this.renderPlayers()}
        </ul>
      </div>
    );
  }
  renderPlayers() {
    return this.state.players.map((player, index) =>
      <li key={index}>{`name: ${player.name} - score: ${player.score}`}</li>
    );
  }
}

ReactDOM.render(
  <App initialPlayers={ PLAYERS }/>,
  document.getElementById('root')
);

Wrong use of componentDidMount, ESlint itself throws an error for this. Instead, componentWillMount should be used. — Namish, Dec 07 '17 at 12:30
Yep you are right, in this case the best choice would be **componentWillMount** — Arnold Gandarillas, Dec 07 '17 at 17:07

How to set state from props that is passed to the component in react?

3 Answers3