React: How do I pass props to state component?

user_6383688 0
Viewed 2868

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 is the link for the API that I'm using for reference.

reactjs javascript
3 Answers

@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

user_81676330

From ur parent component u pass value as nextLaunch Dont forget to call props in ur parent component constructor

 constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      itemsP: 'myValue'
    }
 }

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

So in your Timer Component to print ur value you have to call ur props this way this.props.nextLaunch

class Timer extends React.Component {
  render() {
    return <p>My nextLaunch data are {this.props.nextLaunch}.</p>;
  }
}

Hope it helps

user_78154030 
//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

user_109310040
Related