title: How to set state from props that is passed to the component in react?
body: <p>I have this simple component, <code>initialPlayers</code> props is passed to <code>App</code> component.</p>
  
  <pre><code>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(
       &lt;div&gt;
         &lt;Header players={this.state.players} /&gt;
       &lt;/div&gt;
     );
   }
  }
  
  // Render component
  ReactDOM.render(&lt;App initialPlayers={ PLAYERS }/&gt;, 
  document.getElementById('root'));
  </code></pre>
  
  <p>Have this error in console, and not able to pass value to <code>Header</code> component as <code>{this.state.players}</code>. Any idea?.</p>
  
  <pre><code>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)
  </code></pre>