React.cloneElement
clone and return a new React element using using the passed element
as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. key
and ref
from the original element will be preserved.
React.cloneElement
only works if our child is a single React element. For almost everything {this.props.children}
is the better solution. Cloning is useful in some more advanced scenarios, where a parent send in an element and the child component needs to change some props on that element or add things like ref for accessing the actual DOM element