Use React.cloneElement to Modify and Add Additional Properties to React Children

Jason Brown
InstructorJason Brown
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

In this lesson we'll show how to use React.cloneElement to add additional properties to the children of a React element. We'll also show that you can add additional properties not declared on the element.

[00:02] The cloneElement API from React allows us to extend and modify the functionality of components that we render. We'll start by creating a simple component that just renders some punctuation and some text, so say const add punctuation is equal to a function, so this will be a stateless React component.

[00:24] Say text, punctuation, and then just get the rest of the props, and then we will return a span with our prop spread. This will be anything that if you added a class name or a style, etc., it would be put onto the span. We'll then render our text and our punctuation.

[00:48] If we use this component, apply some text and say, "Hello, world," and a punctuation, give it an exclamation point, close this, and we go to our browser, we can see that, "Hello, world," with our punctuation is being rendered.

[01:09] Now we'll create an emphasize component, say const emphasize is equal to times, which will be the number of times we'll duplicate the punctuation, as well as the children. Here we'll take return React.cloneElement.

[01:25] The cloneElement has an API that takes the child, and then the additional props that you would like to add. In our case, we would say children, because we're only going to be referencing a single child, and then we can say punctuation is equal to the child props.punctuation.repeat the number of times that we want.

[01:53] This is currently overriding the original punctuation that we put in here. Now, if we just wrap our component, we say emphasize, we'll say times 10 and close this around it so that this add punctuation is a child of emphasize. Now if we switched our browser, see when we refresh that it's emphasized our punctuation 10 times.

[02:16] You could do more than just override properties. You can also add additional properties that were not originally declared on the component. For example, you can say style, and we'll pass in font weight, bold.

[02:33] This is a property that was not originally declared here. However, because our add punctuation takes the rest of our props and puts them on the span, this will be inside of here and put onto the span.

[02:46] Now if we save this and we go back to our browser, when it refreshes, you can see that we are adding the property font weight bold, and we are still also overriding our punctuations and emphasizing it 10 times.

egghead
egghead
~ 36 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today