How to pass state property to child component in constructor with React.js?

Question

How to pass a state property of the father component as props for the child component in the constructor? I have something like this:

class FatherComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: true
      components: [
        { component: (
            <ChildComponent
              statusAsProps={this.state.status} />
          )
        }
      ]
    };
  }

render(){
  return(
     <div>{this.state.components[0].component}</div>
  )
}

But shows me the error of this.state is undefined. Is a way to bind "this" of the state as a prop for the children component?

Answer 1

You're using this.state inside itself before it is even defined and assigned a value. That's why the undefined. Avoid complexity and simply render the child component by passing in the required props from the parent's state.

class FatherComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      status: true
    };
  }

  render() {
    return (
      <div>
        <ChildComponent statusAsProps={this.state.status} />
      </div>
    )
  }
}