How to Deal with Multiple Props
As shown in the preceding examples, you are not limited to only one prop per component. Indeed, you can pass and use as many props as your component needs—no matter if that's 1 or 100 (or more) props.
Once you do create components with more than just two or three props, a new question might come up: do you have to add all those props individually (in other words, as separate attributes)? Or can you pass fewer attributes that contain grouped data, such as arrays or objects?
And indeed, you can. React allows you to pass arrays and objects as prop values as well. In fact, any valid JavaScript value can be passed as a prop value!
This allows you to decide whether you want to have a component with 20 individual props ("attributes") or just one "big" prop. Here's an example of where the same component is configured in two different ways:
<Product title="A book" price={29.99} id="p1" />
// or
const...
