title: Set state in parent component so that child components can access state
body: <p>I'm trying to set up state for a portion of my web game that allows players to upload photos of their monsters.</p>
  
  <p>I have a parent component called <code>&lt;MonsterContainer&gt;</code>.  It contains two child components: <code>&lt;MonsterPortraitUpload&gt;</code> and <code>&lt;MonsterViewer&gt;</code></p>
  
  <p>I am setting state in <code>&lt;MonsterContainer&gt;</code></p>
  
  <p><code>&lt;MonsterPortraitUpload&gt;</code> Will allow users to upload photos and it will add to the MonsterPortraits array in the state.</p>
  
  <p><code>&lt;MonsterViewer&gt;</code> Will show all the photos of the monster in the array.</p>
  
  <p>How can I ensure that my two child components have access to this state?</p>
  
  <p>Here is what I have now:</p>
  
  <pre><code>class MonsterContainer extends Component {
  
  constructor() {
      super();
      this.state = {
          MonsterPortraits: []
      };
  }
  
  render() {
      const { monsterId } = this.props;
      return (
          &lt;div&gt;
              &lt;div&gt;
                  &lt;MonsterPortraitUpload monsterId={monsterId}/&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;MonsterViewer monsterId={monsterId}/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p>Right now I am trying to write the state to the console in <code>&lt;MonsterViewer&gt;</code> but I get this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'MonsterPortraits' of null</p>
  </blockquote>