Nested Components

Learning Objectives

After this lesson, you will be able to:

• Diagram nested components

• Render components within another component

• Pass props to a nested component

SEI412 We Do: Nested Components

Create a Comment.js file inside the src directory. Add the following code to it:

import React, {Component} from 'react'

class Comment extends Component {
    render(){
        return(
            <>
                <p>{this.props.body}</p>
            </>
        )
    }
}

export default Comment

Modify your main Dino.js component like so:

import React, {Component} from 'react'
// import the comment component
import Comment from './Comment.js'

class Dino extends Component {
  render(){
    let allComments = this.props.comments.map((c, i)=>{
      return <Comment key={i} body={c}/>
    })
    return (
      <>
        <h1>Check out my {this.props.title} blog!</h1>
        <p>Written by {this.props.author}</p>
        <p>{this.props.body}</p>
        {allComments}
      </>
    )
  }
}

export default Dino;