CODEWITHSUNDEEP
reactjsreact-props
ark
ark

Reputation: 3805

Real-Time use case of this.props.children

I have read many articles to find out the real time use case of this.props.children but i didn't find the answer that i am looking for.I know that this.props.children is used to access the data b/w the opening and closing tag of a component. But my question is why can't we add a prop to the component instead of writing data b/w opening and closing tag. for Ex:

<Example>This is data<Example> //can be accessed as this.props.children
can be written as 
<Example data="This is data"/> //can be accessed as this.props.data

Can somebody please explain me with a real-time example of where we can achieve a certain task by using only this.props.children?

Upvotes: 0

Views: 222

Answers (2)

Daniel Tran
Daniel Tran

Reputation: 6171

For example if you have complicated children of a component:

<Card>
   <div class='title'>Title</div>
   <div class='content'>Content</div>
</Card>

It would be easier than if you write like:

<Card content={[<div class='title'>Title</div>, <....>]} />

Samething you can find here, for example in Drawer component of Material-UI here. Drawer is a component that slides from the left, it can contain anything, so using props.childrens.

Upvotes: 2

Ajay Gaur
Ajay Gaur

Reputation: 5270

While making an app, you want a parent component which will render anything in your component. The use cases which I can think of are:

  1. When you want to open a different component depending upon the route change. 

    const App = ({ children }) => (
    <div className="full-height">
        {children}
    </div>
);

  2. When you want to have same styles throughout your app for generic elements such as body, head etc. You'll just have to apply on this component, e.g., in above example, the full-height will get applied everywhere in the app on top component. (Obviously there are other work arounds but this is always more clear)

  3. For use cases where you want to expose your component (when component doesn't know children ahead of time) as libraries and props can vary a lot and complicates the rendering. Read this

Obviously you don't have to use it but it makes code more elegant and understandable.

Upvotes: 0

Related Questions