Question: 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. 

```
class Main extends React.Component {
  constructor() {
      super()
      this.state = {
          isLoaded: false,
          itemsP:{}
      }
  }

  componentDidMount() {
    fetch("https://api.spacexdata.com/v3/launches/next")
        .then(response => response.json())
        .then(
            (resData) => 
                this.setState({
                     isLoaded: true,
                     itemsP: resData
                 })
        )
}

render() {
   console.log(this.state.itemsP) //this will console.log the object from the api

    return (           
        <main>
           <Timer nextLaunch={this.state.itemsP} />
        </main>

    )
}
}

//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 (    
      <div>
        //display something....
      </div>
    )
}
}

```

[here](https://docs.spacexdata.com/?version=latest#c75a20cf-50e7-4a4a-8856-ee729e0d3868) is the link for the API that I'm using for reference.

Answer: 
@tlrmacl might have answered it there. It's missing the `this` keyword. In theory, you might be assigning the initial value still to the state.

It is due to how react lifecycle works

On your `componentDidMount()`, you are calling setState after the jsx gets mounted to the DOM. `this.state.itemsP` is given an initial value of `{}` then after the mount, it will receive its new value from `comopnentDidMount()`

Inside your `Timer` component, you are assigning the first value of `this.props.nextLaunch` to a new state. It doesn't have the chance to update the value. Instead of doing this:

```
this.state = {
        nextDate: props.nextLaunch.launch_date_utc             
}

```

use `props.nextLaunch.launch_date_utc` directly:

```
console.log(props.nextLaunch.launch_date_utc)

```

For more information check out this tweet by Dan Abramov [here](https://twitter.com/dan_abramov/status/981712092611989509)
```
//Timer component

class Timer extends React.Component{
constructor(props) {
    super(props)
    this.state = {
        nextDate: this.props.nextLaunch.launch_date_utc             
    }
}

```

You need this.props instead of props in your constructor