Advanced Props 12 exercises

Finding a Better Type Definition For A Mapped Component

In this exercise, we're working with a Table component that takes in a renderRow function.

The renderRow function is passed an index, and we're mapping over the indices and passing props.renderRow into the mapping function.

The Table component is working with a ReactNode that represent

Loading exercise


00:00 In this exercise, we have a table component. And this table component basically takes in a renderRow function. And this renderRow function, as we can see, we're just passing in like 0, 1, 3, and we're mapping over it and passing in props.renderRow into that mapping function.

00:18 And we're passing in this React node, which, as far as I understand, represents a React component. So, really, what we should be doing here should be working nicely. We've got this index inside here, but this appears to be... Did you mean to call this expression? Has an any type index here.

00:36 Index should be number, as we've got this test here. But it doesn't seem to be working, and it seems to be working in a bunch of strange ways. We should be expecting an error if we pass in just a plain React component, because this should be this thing here, like an index there. But currently, it's not erroring.

00:55 So your job here is to try to figure out what we've gotten wrong about this table props interface

01:00 and see if there's a better type definition that we can use in its place.