Using props spreading
In this section, we’ll learn about a pattern called props spreading. This pattern is useful when you want to use all the props from an HTML element in the implementation of a component. In our checklist component, we will use this pattern to add all the props for the ul element. This will allow consumers of the component to specify props, such as the height and width of the checklist.
So, carry out the following steps:
- Open
Checklist.tsxand import the following type from React:import { ComponentPropsWithoutRef } from 'react';
This type allows us to reference the props of an HTML element such as ul. It is a generic type that takes the HTML element name as a generic parameter.
- Add the props from the
ulelement to the component props type as follows:type Props<Data> = {data: Data[];
id: keyof Data;
primary: keyof Data;
secondary: keyof Data;
} & ComponentPropsWithoutRef...