Autoplay

    Use React.cloneElement to Extend Functionality of Children Components

    Joe MaddaloneJoe Maddalone

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

    reactReact
    0.14 - 16
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 In a number of interfaces, you'll find yourself wanting to extend the functionality or properties of your children components.

    00:08 To illustrate this, I've got a component called buttons and its children are these three buttons, each with a value a, b, and c. Our Buttons component has a state of selected. By default that's set to none. We've got a selectItem function, which updates that state.

    00:26 Right now, we're simply setting items to this prop's children. We're outputting in H2, that says you have selected, and then whatever the state is. Then, we output those items below it.

    00:35 We have that here. You have selected none, our default state. Then, what I want to do is each time you click on one of these, I want it to update that state. This is a common practice. You'd see this with a tabbed interface or some sort of navigational component or even a radio group.

    00:53 To add that functionality, we're going to use react.children to iterate over these guys, we're going to map over those. We're going to pass into that our props.children, and to keep this on the screen, I'm just going to have a iterator function that we'll create right here. Let iterator function equal...it's going to take in the child.

    01:14 At this point, we might think we could do something like child.onClick equals, or whatever, but you can't actually do that, because props.children isn't the actual children.

    01:28 It's a descriptor of the children, you don't actually have anything to change. You can't change the props, you can't add any functionality, you can't do anything with it. You can only read from it.

    01:38 In order to modify these, we actually need to create new elements. We can do that with react.cloneElement. Into that, we're going to pass our child.

    01:51 Then, the second argument is how we want to extend that. It's an object. We're going to say onClick is equal to this.selectItem. We'll bind that to this. We'll pass in the child props of value.

    02:09 Try that out. You have selected none. You have selected c, b, a.

    Discuss

    Discuss