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

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.

    function TextComponent(props){
        return (
                

                    
                    {props.title}
                
       );
   }