title: Passing State To Child Component is null on button press
body: <p>Newby React Project Help:</p>
  
  <p>I am trying to pass the state of a component to a child component so it can load an image. The state of gift1 is null originally. When a button is pressed, it toggle displays the child component and gift1 is set to an object with details of an image. Below is the toggle set up in the parent component where this.state.giftContainer is used to toggle the child component: GiftBoxAnimation. It also passes the gift1 state as gift property to the child. </p>
  
  <pre><code>let display = this.state.giftContainer &amp;&amp; this.state.giftContainer === true 
    ? (&lt;GiftBoxAnimation gift={this.state.gift1} /&gt;)
    : null;
  </code></pre>
  
  <p>When a button in the parent component is pressed, <code>generateItems()</code> fires and sets the state of gift1 to that object and then toggles the child</p>
  
  <pre><code>  generateItems = (e) =&gt;{
    //Insert code here that sets state of gift1: {name: "giftImage"}
  
      this.setState({
        giftContainer: true
      });
    }
  </code></pre>
  
  <p>The Child Component looks something like this:</p>
  
  <pre><code>  &lt;Spritesheet
      className={"sprite-gift"}
      image={"/images/"+this.props.gift+".png"}
      widthFrame={1024}
      heightFrame={1024}
      steps={5}
      fps={5}
      autoplay={true}
      loop={true}
    /&gt;
  </code></pre>
  
  <p>When I try and get the image data using <code>this.props.gift</code>, it returns gift1 null state originaly set. The second time the button on the parent component is pressed, an Object is return. However, if I try and access the image with <code>
  this.props.gift.name</code> It is <code>undefined</code>.</p>
  
  <p>How can I pass the parent state to the child, so I can display the image in the child component on the first button press of the parent?</p>