React is a declarative and component based language. The components communicate between each other using props. Props can be string, numeric, boolean, function and react class component as well.

Yes, we can pass component itself as a prop to another component. There are two way to pass a component to another component.

Render Props

In render props, we pass a function that the receipent component uses to render. Here is an example of using render props.

Suppose that we have two components, i.e. List component and Wrapper component. The Wrapper component renders the list of items using List component.

class Wrapper extends Component{
  render(){
    const { items } = this.state;
    return <List items={items}/>
  }
}

Here the wrapper component passses the data to list component, which it uses to render the list.

Suppose that the ListItem is very configurable, so instead of passing only data, we are going to pass the listitem as prop to the list. (Ofcourse, the List item should be configured to use the ListItem component).


class Wrapper extends Component{
  render(){
    return <List listItem={(prop)=>{
      <div class="listitem">
        {
          prop.items.map((item)=>{
            return <Fragment>
              <div>{item.title}</div>
              <div>{item.description}</div>
            </Fragment>
          })
        }
      </div>
    }}

    items={[{
      title: 'Title 1',
      description: 'Description 1'
    },{
      title: 'Title 2',
      description: 'Description 2'
    }]}/>
  }
}

class List extends Component{
  render(){
    const { items, listItem } = this.props;
    if(listItem){
      return listItem(items)
    }
    ... // do fallback render of items
  }
}

In the above component, the Wrapper component is passing a function called listItem to the List component, along with the data items.

listItem is a functional React compoent, which accepts the prop of items, loops through it, and renders a custom list of items.

React is a declarative and component based language. The components communicate between each other using props. Props can be string, numeric, boolean, function and react class component as well.

Yes, we can pass component itself as a prop to another component. There are two way to pass a component to another component.

Render Props

In render props, we pass a function that the receipent component uses to render. Here is an example of using render props.

Suppose that we have two components, i.e. List component and Wrapper component. The Wrapper component renders the list of items using List component.

class Wrapper extends Component{
  render(){
    const { items } = this.state;
    return &lt;List items={items}/>
  }
}

Here the wrapper component passses the data to list component, which it uses to render the list.

Suppose that the ListItem is very configurable, so instead of passing only data, we are going to pass the listitem as prop to the list. (Ofcourse, the List item should be configured to use the ListItem component).


class Wrapper extends Component{
  render(){
    return <List listItem={(prop)=>{
      <div class="listitem">
        {
          prop.items.map((item)=>{
            return <Fragment>
              <div>{item.title}</div>
              <div>{item.description}</div>
            </Fragment>
          })
        }
      </div>
    }}

    items={[{
      title: 'Title 1',
      description: 'Description 1'
    },{
      title: 'Title 2',
      description: 'Description 2'
    }]}/>
  }
}

class List extends Component{
  render(){
    const { items, listItem } = this.props;
    if(listItem){
      return listItem(items)
    }
    ... // do fallback render of items
  }
}

In the above component, the Wrapper component is passing a function called listItem to the List component, along with the data items.

listItem is a functional React compoent, which accepts the prop of items, loops through it, and renders a custom list of items.