Advantages
- Avoids prop drilling
- Helps to create compose components
- Helps in building layouts
- In order to group unknown similar elements into a parent element.
- We can use them when the elements are not known in advance.
How to access props.children in a stateless functional component in ReactJS ?
The {props. children} allows you to create a generic template, which can be modified by a parent when invoked. In this way, a parent component can easily pass whatever is necessary to its child, even generated layout features. Anytime you call a component, it automatically displays whatever it has between its opening and closing tags. A component with children is always identified with an opening and a closing tag. Each child must go between these two tags.
Props are implemented by defining props in the parent component and passing them down to the next child component and then passing the value again through props in the child component, and then again through the grandchild – which is repeated until the value of the passed value has arrived in the target component. It is a tedious, error-prone process that decreases code flexibility.
Implementation of {props. children}: Implementation is pretty straightforward. Import the child component into the parent component, but instead of invoking it with a self-closing tag, use a standard open/close tag. Information is passed between the opening and closing tags of a child component – in addition to the standard implementation for passing props.