Skip to content
Related Articles

Related Articles

Improve Article

What is the difference between createElement and cloneElement ?

  • Last Updated : 19 Jul, 2021

React.createElement() Method: The 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: 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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

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

App.js






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.

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;

Button.js




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

Output:

createElementcloneElement
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. 



My Personal Notes arrow_drop_up
Recommended Articles
Page :