React.cloneElement() Function

What is React.cloneElement()?

React.cloneElement() is a function that is part of the React Top Level API and this function is used to manipulate elements.

React.cloneElement() clones and returns a new element using a react element or a component as a starting point. The newly created element has the following:

• The props from the original element and the new props.
• key and ref from the original element.
• New children that replace existing children.

Syntax

The React.cloneElement() takes in three arguments. Let's first look at the syntax and learn more about these arguments

Let's understand the arguments:

• element: This should be a valid React element. A valid react element can be a JSX node like <MyComponent'/>.
• props: This takes in an object that contains props you want to pass to the new element. The React.cloneElement() gives higher priority to the props that are in this object and the default props from the element are overridden. After that, the leftover props from the original element are filled.
• ...children: This represents the number of child nodes. These can be React nodes, react elements, strings, numbers, empty nodes, or an array of React nodes. In case nothing is provided then element.props.children is preserved.

Usage of React.cloneElement()

The React.cloneElement() method returns a React element with some properties:

• type : It is the same as element. type.
• props : element.props along with props that we pass to override element.props.
• ref : Original element.ref or if overridden by props.ref.
• key : Original element.key or if overridden by props.key.

Now that we completely understand what this function returns, let's look at when to use React.cloneElement().

We can use React.cloneElement() for the following processes:

• Modify properties of children
• Add to children's properties
• Extend the functionality of children's components

We will dig deep into these use cases, but first, let's take an example for React.cloneElement()

Explanation

Here we are trying to set highlighting to the specific list item. For that, we have just cloned the child element and we are providing an additional prop is highlighted to it. This way the list element will have an additional is highlighted prop added to it.

Modify Children's Properties

When we adjust a child's property, we are essentially passing the child's new values through the parent component. This may sound a little complicated to get your head through so let us take some examples to better understand this.

Output

Explanation

Take a minute and go through this code. Here <AppendWord/> is the parent component and <AddSuffix/> is the child component. We are taking prop word in the parent component and using React.cloneElement() to clone the children element that is being passed to <AppendWord/> which is the <AddSuffix/> component. The main thing to focus on here is that we are modifying the property of the child element from the parent component. This is the reason why we get Chocolate Caramel instead of Chocolate Drink.

Add to Children Properties

The name of this process itself-explanatory. Through this process, we add something new to the child from the parent element.

Let's take an example where we want to add some styling to a react element.

Output

Here, the parent component is <BoldContainer/> and the child component is <SpanWithText/>. The style property is added to the child inside of the parent component using the React.cloneElement() method.

Extend the Functionality of Children Components

Not only stying and properties, but we can also add functionality to the child components from the parent component.

Let's take an example where we make a button and attach an onClick() event handler to it which displays an alert box.

Output

Explanation

In this code example, we have added an event listener on our button and along with that we have also replaced the button text by sending a string as a third argument to the React.cloneElement() method.

Alternatives to React clone element

React.cloneElement() has some caveats:

• Cloning doesn't modify the original element.
• If we pass an array then react warns us about missing keys.
• cloneElement makes it hard to trace data flow.

There are also alternative approaches to React.cloneElement()

Passing Data With a Render Prop

Consider taking a render prop like render rather than clone element.

Let's look at an example first

Output

This is a simple example that depends on props to render elements. The render prop tells how to render something.