React props vs children . What to use when?

Question

What is the difference between the two approaches ?

Passing text for a button as props

   

    function TextCo         


        

Answer 1

You should use children when you don't know them ahead of time, see: https://reactjs.org/docs/composition-vs-inheritance.html

Here, if you KNOW that you'll use a title inside your child component, just use a named prop.

I'd say that if you ask yourself the question: "Ok, but what will that generic component render?" is when you should use children

Answer 2

When you do know what your props are, use props. Otherwise, use children (aka containment).

Other than that, using props/children in your case depends on what you want to pass:

1. If its a single props (like item), than it doesn't matter which method you'll choose.
2. Else, you should check what you are passing inside children as you might pass other values which you don't want to render.

I would suggest using the selective approach (e.g props.title), since you are always aware of whats going inside your components.

Answer 3

You use props.children on a component which acts as a container and does not know about their children ahead of time.

Basically props.children it is used to display whatever you include between the opening and closing tags of the "containing" component when invoking it.

Answer 4

children prop is something that you use when the structure of what needs to be rendered within the child component is not fixed and is controlled by the component which renders it.

However if behaviour of the component is consistent across all its renders it can define the specific props that it needs and the parent can pass them to it.

A very simple example could be a Navbar which can use children. For a Navbar the items that it needs to render as well as the order or alignment or items depends on how it needs to be used at different instances or across different pages. For instance Navbar somewhere can have Search component at one place and at some other place not have it. Also the menus may sometimes be needed to the left followed by Login menu item to the right and a searchbar between them and sometimes they may all be present to the right without the searchbar. In such cases the parent component can control how the internal structure would be

Answer 5

As mentioned in the React official docs:

Some components don’t know their children ahead of time. This is especially common for components like Sidebar or Dialog that represent generic “boxes”.

We recommend that such components use the special children prop to pass children elements directly into their output:

Simply put, it props.children just displays whatever is put between the opening and closing tags.

As asked in your question, there is not much difference in the use case specified by you.

But, say you had a small left icon the component then passing 'title' as a separate prop would make more sense Eg.

<TextComponent title="Save" src="https://..." />

    function TextComponent(props){
        return (
                <div>
                    <img src={props.src}/>
                    <button>{props.title}<button/>
                </div>
       );
   }