Hi my problem is I have two components; a list component and a list item component. This list item component has a checkbox. I am creating a list out of this cards I have designed and putting this list component inside a page. Below is an image describing what I am trying to do. I want to have an option to select all the checkboxes. Problem is I don't really know how to go down all the components and check their boxes.

The cards have props for the items they are holding. So I thought of putting a property in them like "isSelectAll" and if that is true the checkbox is selected but if it is false checkbox contains its independent value.

But I wanted to know if there is any better way than this because it seems not efficient. Perhaps with some type of a react hook?