Adding checked functionality
Currently, our checklist component doesn’t contain the ability to check items, so we will now add checkboxes to the list of items, giving users the ability to check them. We will track the checked items using a React state.
So, carry out the following steps to add this functionality to our component:
- Open
Checklist.tsxand adduseStateto the Reactimportstatement:import {ComponentPropsWithoutRef,
ReactNode,
useState
} from 'react';
We will use the state to store the IDs of the checked items.
- At the top of the component implementation, add the state for the IDs of the checked items:
const [checkedIds, setCheckedIds] = useState<IdValue[]>([]);
We have referenced an IdValue type that we haven’t defined yet – we’ll define this after we have finished the component implementation in step 6.
- Add checkboxes to the list of items as follows:
<li...