CODEWITHSUNDEEP
javascriptreactjsjsx
Kiran
Kiran

Reputation: 2437

Using React.cloneElement() in JSX

I want to know how to use cloneElement syntax in JSX. I read Docs and tried examples but still don't have any clue.

class ABC extends React.Component {
  constructor(props){
    super(props)
}
render() {
  return(
  <div>
    {React.cloneElement()}
  </div>
  )
}
}

Upvotes: 13

Views: 20757

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281804

According to the documentation:

Clone and return a new React element using 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.

A valid use case for cloneElement is when you wish to add one/more props to the elements passed a children by the parent.You would simply map over all the children and clone them by adding new props for instance.

return (
  <div style={styles}>
    {React.Children.map(children, child => {
      console.log(child);
      return React.cloneElement(child, {newProp}, null);
    })}
  </div>
)

Check a working demo

Upvotes: 15

Related Questions