Using Generics with Components 11 exercises

Generic Inference through Multiple Type Helpers

ButtonGroup Component and Props

Here we have a component named ButtonGroup that takes in a set of props, referred to as ButtonGroupProps.

These props include an array of buttons, each of which follows a specific interface structure with a value and label strings as well as an `onClick

Loading exercise


00:00 In this exercise, we have a component called ButtonGroup, and ButtonGroup takes in ButtonGroup props, takes in an array of buttons, which is this interface here, a value string, label string, and then it takes in an onClick where it takes in the value that it's getting from these buttons and passes it back up.

00:18 So it's like an event handler that it bubbles up. So we can see that buttons are being mapped here and they're being created with their button.value being the thing that gets clicked here or get sent up when it's clicked, and then the label is the thing that's being grabbed there. So we have an Add button and a Delete button,

00:36 for instance, which each have different values. But what I'd like to do here and the way I'd like to change this, is I'd like value to actually be inferred as Add or Delete instead of just string here. Because string, it's just not as descriptive as it could be.

00:54 We know the exact values that are being passed in here, and ideally, we want to just grab those and put them in the value there. Seems simple enough. So we've got a generic component that needs to be made here obviously, and we need to somehow make sure that value here and value here are the same thing or one is being inferred from the other.

01:14 Anyway, that's your challenge. Good luck.