What is props.children? [duplicate]

Question

I am following this tutorial and the instructor did something like this to explain Higher order component

const aux = (props) => props.children;

export default aux;

and then imported this to some other file and replaced div tag with, for say <Aux> tag.

Now, It's sort of hard for me to understand this because I am not really sure what props.children actually do (since we hardly used it previously throughout our lectures).

I did some googling and went through an article or two on web but for some reason, their description was vey vague.

Can someone explain me the use of props.children in general?

Answer 1

props.children is a prop like every other prop in React, but it's passed differently (when using JSX) between tags:

<Component>text</Component>

What you put between the tags will be passed to component as props.children. It can be:

undefined, null, a boolean, a number, a string, a React element, or an array of any of those types recursively.

It can also be a function that returns one of the above ^ to create render prop pattern.

If you want to directly work on children prop (filter or map them), you will probably need some React utility functions.

That's pretty much it. There are of course more details in React documentation.