React.cloneElement vs. this.props.children

this.props.children is a reference to each of the children elements to some component (assuming it’s a class-based component, otherwise it would be just props.children). if you wanted to reuse those particular children, you could display them by referencing them with, for example:

buttons = this.props.children

However, this.props.children is read-only, which means you cannot update their state with that reference alone. but, as long as you map over it properly (using the React.Children API), you can wrap your props.children functionality in React.cloneElement to return a new, alterable state… which React can now properly track, without side effects.

for some syntax and context, there’s no replacement for the official documentation: