How to access props.children in a stateless functional component in react?

The functional components in react are better to use if there aren’t any internal state to be tracked within the component.

But what I want is to access the children of the stateless components without having to extend React.Component using which i can use props.children. Is this possible ?

If so , how to do it ?

Answer

We can use props.children in functional component. There is no need to use class based component for it.

const FunctionalComponent = props => {
  return (
    <div>
      <div>I am inside functional component.</div>
      {props.children}
    </div>
  );
};

When you will call the functional component, you can do as follows –

const NewComponent = props => {
  return (
    <FunctionalComponent>
      <div>this is from new component.</div>
    </FunctionalComponent>
  );
};

Hope that answers your question.

Leave a Reply

Your email address will not be published. Required fields are marked *