Open In App

What is the difference between createElement and cloneElement ?

Improve
Improve
Like Article
Like
Save
Share
Report

This article will help us to gain knowledge of createElement and cloneElement and we will also learn them with code examples and their difference.

We will learn the following methods:

React.createElement() Method:

React.createElement() Method is used to create elements. Whenever we write code in JSX, JSX converts it to React.createElement(). The createElement method is not recommended to use as it is very hard to maintain or debug. We’ve to call the React.createElement() method every time for the creation of a React element, even if it is just a span tag with no attributes.

Syntax: 

React.createElement(
type,
[props],
[...children]
)

Example: In this example, we have created a div element using React.createElement() method.

Javascript




import React from 'react';
import "./styles.css";
const title = React.createElement('h1',
    { className: 'title' }, 'GeeksforGeeks');
const App = () =>
    React.createElement('div', {}, [
        React.createElement('button', { className: 'btn' }, title),
        React.createElement('button', { className: 'btn' }, title),
    ]);
 
export default App;


Output:

createElement()

React.cloneElement() Method:

The React.cloneElement() method is used when a parent component wants to add or modify the props of its children. The React.cloneElement() function creates a clone of a given element, and we can also pass props and children into the function.

Syntax:

React.cloneElement(
element,
[props],
[...children]
)

Example: In this example, we have used cloneElement to pass down the props.

Javascript




//App.js
import React from 'react';
import Button from './Button';
import './styles.css';
const App = () => {
    return (
        <Parent>
            <Button />
            <br /><br />
            <Button />
        </Parent>
    )
}
 
const Parent = (props) => {
    let btn = 'GeeksforGeeks';
    return (
        <div>
            {React.Children.map(props.children,
                child => {
                    return React.cloneElement(child,
                        { btn }, null);
                    // third parameter is null
                    // Because we are not adding
                    // any children
                })}
        </div>
    )
}
 
export default App;


Javascript




//Button.js
 
import React from 'react';
const Button=(props)=> {
    return (
        <button>
            {props.btn }
        </button>
    )
}
 
export default Button;


Output:

Difference between createElement and cloneElement?

createElement cloneElement
createElement is the code that JSX gets compiled or converted into and is used by reacting to create elements. cloneElement is used for cloning elements and passing them new props.
This method is used to describe how the User Interface looks. This method is used to manipulate the elements.
createElement requires type, props, and children as arguments. cloneElement requires elements, props, and children as arguments. 
It creates and returns a new element with the type as given in the arguments. It clones and returns a new element with the properties of a given element. 


Last Updated : 11 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads