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:
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'}, 'neveropen'); 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 = 'neveropen'; 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:
| 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. |
