Hey guys, trying to understand the best practices for creating reusable components when adding extra props. I’m not quite sure when to use the rest operator for bring in any other props the component needs.
Here, I am creating two buttons from the same component, but adding an extra prop and checking if that prop exists, then rendering an extra div. I don’t think this is right and I need to use the rest operator for this to be right? Any guidance is much appreciated.
In general it is not good idea. You want button to stay a button, meaning conditional rendering should be applied to it and be essential part of it. I’m really not sure about inserting anchor inside a button and conditionally rendering something outside the button (as well as wrapping button in a block element in the first place). This way would be more correct in my opinion:
It’s hard for me to imagine the case where you would use spread operator for component like this. The only place where you would use it is higher order components really:
It’s just that professionally the codebase I ran into they were using it by accepting whatever prop you pass in. But I would imagine you need to add that to the propTypes object before you use it.