 Now, what are we to do about this duplication? This duplication of this button class here, here, and here. It'd be nice if our base button knew how to apply just the base button styling, but accept additional classes for the more specified components. Let's try adding it and see what happens. So say class name equals button and then remove it from all the places that we're using it. So something is not right. Obviously all of these buttons changed because our base button class is not getting applied correctly. And the reason that is is because order matters in JSX. So I'm spreading these props. And in this case, it's like saying class name equals button danger right after I've specified class name up here. We can see if we put this prop spread above class name, well, then we get all of the basic buttons without the specialization of that button danger or button primary class. So we need to merge this class name with the one that we're getting from props. We can do this very effectively with an array. First element is just going to be our button string. Second element is going to be our class name, the one that we got from props. Close that and join with an empty string. And we're back in business. Because we're defining class name here after we've spread our props, this merged class name is the one that takes precedence. However, you can see that order still matters here, which isn't ideal. So when I merge props like this, I like to de-structure the props object that I get as an argument and pop off the values that I need and use this rest operator here to create a new object with all the remaining props. Now this props object doesn't have class name one at all. So I actually need to remove that here and use that local identity that I created here for class name.