title: React: How do I pass props to state component?
body: <p>Need help passing state as a prop to another state component. I'm very new to React and I'm not sure what I'm doing wrong. When I console.log inside the Timer component it displays undefined but when I console.log in the Main component it displays the object perfectly. </p>
  
  <pre><code>class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            isLoaded: false,
            itemsP:{}
        }
    }
  
    componentDidMount() {
      fetch("https://api.spacexdata.com/v3/launches/next")
          .then(response =&gt; response.json())
          .then(
              (resData) =&gt; 
                  this.setState({
                       isLoaded: true,
                       itemsP: resData
                   })
          )
  }
  
  
  
  render() {
     console.log(this.state.itemsP) //this will console.log the object from the api
  
      return (           
          &lt;main&gt;
             &lt;Timer nextLaunch={this.state.itemsP} /&gt;
          &lt;/main&gt;
  
      )
  }
  }
  
  //Timer component
  
  class Timer extends React.Component{
  constructor(props) {
      super(props)
      this.state = {
          nextDate: props.nextLaunch.launch_date_utc             
      }
  }
  
  render() {
     console.log(this.state.nextDate)  //will console log UNDEFINED why is this?
  
      return (    
        &lt;div&gt;
          //display something....
        &lt;/div&gt;
      )
  }
  }
  </code></pre>
  
  <p><a href="https://docs.spacexdata.com/?version=latest#c75a20cf-50e7-4a4a-8856-ee729e0d3868" rel="nofollow noreferrer">here</a> is the link for the API that I'm using for reference. </p>