CODEWITHSUNDEEP
reactjsreact-props
Ram
Ram

Reputation: 132

Can't render the component received as a prop.children in my parent component

I am unable to render the prop.children which has a component.

// code for Layout component which could not render the prop.children
render(){
    return (
      <div>
        <Header/>
        <NavBar/>
        {props.children}
        <Footer/>
      </div>
    );
}

//code where I am trying to render the Layout component
  render() {
    const { user } = this.props;
    return (
      <React.Fragment>
        <Layout {...user}>
          <ListView user={user} />
        </Layout>
      </React.Fragment>
    );
  }

//P.S. ListView is another component which accepts user props

I can't see anything for props.children when I inspect the DOM, though I can see Header, NavBar, Footer being rendered properly.

Upvotes: 0

Views: 70

Answers (2)

Aprillion
Aprillion

Reputation: 22322

If you can see a TypeError in the console that props is undefined, then inside a class method, you need to use this.props.

Upvotes: 0

Berouminum
Berouminum

Reputation: 530

In a class you need to add this to access properties.

render(){
    return (
      <div>
        <Header/>
        <NavBar/>
        {this.props.children}
        <Footer/>
      </div>
    );
}

Upvotes: 2

Related Questions