Using Generics with Components 11 exercises

Passing Type Arguments To Components

Working with TypeScript and React Components

We're back to the functional Table component that we've seen before.

This time, it's the tests that have changed.

In the first usage of the Table component, we want the rows to be an array of User, but this is currently failing:

Loading exercise


00:00 Okay, we're still with our table. What we're doing with our table now, it's back to being a functional component. What we want to do is, we're actually going to keep all of this all the same. So you don't need to change anything about how the component is set up. Really, what I've done is I've changed the way the tests work. Now, the tests, what we're doing here,

00:19 is we basically want to say to this table, I want you to be a set of users, a row of users. Because currently, what we're getting here is an error because rows should be an array of users. Now, this is slightly thinking backwards here, because sometimes what you have is you

00:39 have a big array of mock data here. You would expect here that, okay, we've got this first one here, it looks like it's formatted correctly. So ID is a number, age is a number, name is a string, ID number, age number, name string, perfect, looking good. But this one, we're accidentally passing in an ID of a string here.

00:58 This isn't good because actually what gets inferred is we now got two different objects competing for each other here. So where ID number or ID string could be one of the possibilities. So TypeScript is being too clever here. It's actually not erroring in the place where we want it to,

01:17 it's actually filtering down and hurting us a little bit. So your job here is to try to work out if we can actually pass a type to this instantiation of the components. This bit here and this bit here, really the type that we want to be passing and enforcing is this user type.

01:37 So your job is to see if there's a way that you can pass a type as an argument to a component in order to enforce this error and enforce this error. Good luck.