在 Reactjs 中，我如何传递两个道具，其中一个是数组

Question

I am trying to pass two props to a child component like this:

<CountData onchoiceChange={[{value: 1, label: A}]} selectedGroup ={"GrpA"} /> 

And since onchoiceChange is an jsonarray it could be something like:

[{value: 1, label: A},{value: 2, label: B}]

and if i pass props like the above, in my child functional component

export default function CountData(onchoiceChange,selectedGroup) {

my value become

-onchoiceChange.onchoiceChange
-onchoiceChange.selectedGroup

and my desired is only -onchoiceChange & -selectedGroup

thank if anyone can help

Answer 1

Your component is receiving a single parameter, which is an object containing the props of your component. Hence, you can destructure it like this, to access the object you want:

export default function CountData({onchoiceChange,selectedGroup}) { ... }

You can also destructure the props object in an other way, which is equivalent, more verbose, but easyer to understand:

export default function CountData(props)   {
    const {onchoiceChange,selectedGroup} = props
}

If the way how props are working in React is not clear for you, I suggest you to read the official documentation

And if you want to know more about destructuration, you can read this article for instance.