 Now, with React, we can extract components. Now we have this button here, and let's say that we use this primary button all over the app. We can extract it very easily, cut the code, and we'll give it a name we want. Let's call this primary button and change the text to touch this. Now let's define that with the code that we copied. Now we have a little bit of a problem already. We are hard coding this touch me text into this. So when we pass in these children, touch this, our button doesn't change. Well, we can fix that pretty easily. We can cut this out and use props.children, and that fixes the button. Let's say they want to add a data attribute or an aria attribute or anything along those lines that we haven't yet considered. Well then we have to come up into our component and implement it individually every time. I prefer to say, hey, any attributes you give me, I'm going to render out. And we can do that by using the JSX spread operator with props. So here we're taking props as an argument. It has it's an object full of all of the attributes and we're going to spread all of those attributes out over our button. Now once we've done that, children is just a prop like any other. So we can kill that and everything works as we hope. So we can come down here, make multiple primary buttons each with different text.