React props vs children . What to use when?

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

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

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.