Making the most out of the children in React components. What are React Children? Children (props.children) according to Documentation is an ‘opaque’ data structure. All that means is don’t mess with them directly. Luckily React offers some utilities to work with Children easier. React The basic of a React Child, that is a looks something like this: structure Basic React Child Structure A React Child has a few key properties that you might want to work with: : Used by React to verify the child is a valid element. $$typeof : This is set by the rendering component. If you are rendering multiple element odds are you are using this. If you aren’t you should. key This is the props being passed down to the child props: The ref function assigned to the child. This could also be a string, but you should make it a function. ref: This can be the function used to create the component or a string. type: : Do all children look like this? Q : No. Children can be strings, booleans, numbers, null, etc. You can verify it is a valid react element by using React.isValidElement(object). This checks that the variable passed to it is an object, and it has the correct symbol for $$typeof. A The Children Utilities React offers a few utilities to work with children. You can read more about them here: . React Children Documentation React.Children.map First up is the map utility. This is very similar to Array.protoype.map, but it has 1 key difference. If children is null or undefined it will return null and not an array. This is useful since react will not render and array or undefined. This is extremely useful if you want to pass extra props to this children: React.Children.forEach The forEach utility behaves the same as the map utility, but it does not have a return value, similar to Array.prototype.forEach. This can be used to filter out children or find a certain child the component needs to work with. React.Children.count This one is self explanatory. It returns the count of the children. React.Children.only The only utility will return the only child in children, and if there is more than one is will throw. This is very useful to limit the amount of immediate children that can be passed to a component. React.Children.toArray Another pretty self explanatory utility. toArray converts the children object to an array. It also assigns a key to each child to scope them to the input array. This is useful if you need to reorder or slice the children object. The Children Utilities In Practice One thing that has come up in articles about Vue vs React is the lack of “slots” in React. While this could easily be done by just passing the “slots” down as props, slots with a similar API to shadow DOM or Vue can also be implemented using React’s Children utilities. Note: It is probably more efficient to do this with props, since we will need to traverse over the Children any component that is passed a decent amount of root level children could cause performance hits. The above example is a quick example of how you could use the Children utilities. For a more in depth example you can checkout . react-slotted is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories
