title: Where to keep reference to initial data for child component in ReactJS
body: <p>I have a parent component which makes an API call after mounting. Part of the data it gets is display-initialization data for the child components, so I don't want to store it in its own state if it's not relevant to it. My issue is, where do i store the child data so that I can reference it and pass it to the child components' props in the parent's render method? I considered just having the child components fetch their own data after they mount, but it seems like it would be better to have at least some initial display, and then have them take care of updating themselves afterwards.</p>
  
  <pre><code>import React, { Component } from 'react';
  import Game from './Game';
  import GameSetup from './GameSetup';
  
  let gameInit, setupInit;
  
  class GameRoom extends Component {
  id = this.props.match.params.id;
  
  state = {};
  
  boundHandlers = {
    receiveGameRoomData: receiveGameRoomDataHandler.bind(this)
  };
  
  componentDidMount() {
    this.props.socket.on('gameRoomData', 
    this.boundHandlers.receiveGameRoomData);
    this.props.socket.send(JSON.stringify({event: 'getGameRoomData', 
    payload: this.id}));
  }
  componentWillUnmount() {
    this.props.socket.off('gameRoomData', 
    this.boundHandlers.receiveGameRoomData);
  }
  
  render() {
    const renderMainArea = () =&gt; {
      if (this.state.gameInProgress) return &lt;Game socket={this.props.socket} 
    initData={setupInit} /&gt;;
      else if (this.state.gameInProgress === false) return &lt;GameSetup 
      socket={this.props.socket} initData={gameInit} /&gt;;
      return null; // this is only reached when gameInProgress is undefined, 
     meaning there's no data from the server yet
    };
    return (
      &lt;React.Fragment&gt;
        {renderMainArea()}
        {this.state.scoreBoard ? &lt;ScoreBoard scores={this.state.scoreBoard} 
        /&gt; : null}
      &lt;/React.Fragment&gt;
    )
  }
  
  }
  
  function receiveGameRoomDataHandler(data) {
    data = JSON.parse(data);
    let inSetup = "setupData" in Object.keys(data);
    if (inSetup) setupInit = data.setupData;
    else gameInit = data.gameData;
    inSetup ? delete data.setupData : delete data.gameData;
    this.setState(data);
  }
  class ScoreBoard extends Component {
  
  render() {
    const scoreData = this.props.scores;
    const playerNames = Object.getOwnPropertyNames(scoreData);
    let tableData = '';
    playerNames.forEach(name =&gt; {
      tableData += `&lt;tr&gt;&lt;td&gt;${name}&lt;br/&gt;${scoreData[name]}&lt;/td&gt;&lt;/tr&gt;`;
    });
  
    return (
      &lt;table dangerouslySetInnerHTML={{__html: tableData}}&gt;&lt;/table&gt;
      )
    }
  }
  
  export default GameRoom;
  </code></pre>