Question

20

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

rated 0 times [ 26] [ 6] / answers: 1 / hits: 24484 / 6 Years ago, sun, december 23, 2018, 12:00:00

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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

annalise

Add To Favorites

Follow

Total Points: 210

Total Questions: 94

Total Answers: 102

Location: The Bahamas

Member since Tue, Apr 27, 2021

3 Years ago

annalise questions

1 How to import GIF in NextJS

Mon, May 24, 21, 00:00, 3 Years ago

1 React Hook Form: Making append() Asynchronous

Wed, May 5, 21, 00:00, 3 Years ago

1 How to setup Tailwind for a new Angular project?

Sat, Sep 12, 20, 00:00, 4 Years ago

1 Attempted import error: 'BrowseRouter' is not exported from 'react-router-dom' (imported as 'Router')

Thu, Sep 10, 20, 00:00, 4 Years ago

1 Summing Array Elements from Specific Index Range

Tue, Jul 28, 20, 00:00, 4 Years ago

View All

answered 6 Years ago alanisannettep · Accepted 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.