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

Question

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 1

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.

Answer 2

Alternatively to the answer by Ashish, you can destructure the "children" property in the child component using:

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

This will allow you to pass along other props that you would like to destructure as well.

const FunctionalComponent = ({ title, content, children }) => {
  return (
    <div>
      <h1>{ title }</h1>
      <div>{ content }</div>
      { children }
    </div>
  );
};

You can still use "props.title" etc to access those other props but its less clean and doesn't define what your component accepts.