如何在 React 中为 2 个相同的子组件分配不同的值

Question

For example

I have a parent component named. This component contains 2 of the same components called. it looks like this so far

<Overview>
  |<Stats>
  |<Stats>

The Stats component contains html that looks like this.

Pic of Stats Component

Now the first time I insert <Stats> I want to assign values different from when I insert the second component. So in the screenshot there are numbers under each section. That is going to be the default numbers every time you insert the <Stats> component. How can I assign different numbers to every time I insert a <Stats> Component. I don't want the same numbers.

What I thought about doing was creating States in overview, for example Submitted, Redeemed...etc. Then in the component retrieve those states but assign itself new values. I have read setState needs to be used but for the life of me I cant figure it out.

Any Help would be greatly appreciated.

Answer 1

You can pass the numbers as props. Just give it a name, assign to that name in your opening JSX tag, and then reference it as this.props.yourPropName in the class. (If you are using classes) or props.yourPropName if the component is made with a function)

function Stats(props){
//your code
}

<Stats yourPropOne=5 yourPropTwo=3/>