Use React.cloneElement to Extend Functionality of Children Components

Share this video with your friends

Send Tweet

We can utilize React.cloneElement in order to create new components with extended data or functionality.

Lars-m
Lars-m
~ 8 years ago

Up until now I really liked this series. But does this example not breaks with the whole idea of React and the Virtual DOM?

Each time a button is clicked, all thee buttons must be cloned and the whole screen re-rendered. That seems very in-efficient?

Control Group
Control Group
~ 8 years ago

If your changes to the children do not rely on an updated state (similar to this lesson), you can make those changes in the componentWillMount() method so they only happen the first time the component is rendered. Subsequent renderings will already have the updated children.

bohenan
bohenan
~ 7 years ago

I am wondering why does the syntax 'this.setState({selected})' (inside selectItem function) working correctly? Should it be 'this.setState({selected: selected})'?