Q:

React current item is always the first item from the rendered component list

I am using material ui with react.  Following is the component that renders the rating elements based on passed array input.  
class SkillSlider extends Component {

  constructor(props) {
    super(props)
    this.state = {
      skills: this.props.job.skill.map(skill => ({ name: skill.name, value: 1, hover: -1 }))
    }
  }

  render() {
    let { skills } = this.state;
    console.log("rendering..", skills)
    return (
      <div>
        {skills.map((item, i) => {
          console.log(">>>>", item.name)
          return (
            <div key={i} >

              <Box color={'white'} ml={2}>{item.name}</Box>
              <Rating
                name="hover-feedback"
                value={item.value}
                precision={0.5}
                onChange={(e, value) => { console.log("on change", item, value) }}
              />

            </div>
          );
        })}
      </div>
    );
  }
}

export default SkillSlider;

consider my skill in job inside the props is,
this.props.job.skill --> [{name:Java}, {name:React}, {name:AWS}]

The above component is getting rendered as per expectation but when I click on the rating, in the on change handler, I always get the first element and not the current element. 
e.g. in my example when I click on AWS, the log shows Java. 
Here is the sandbox, https://codesandbox.io/s/eloquent-chatterjee-609ww?file=/src/App.js

A:

It is because you are using same name for all the rating components when mapping dynamic values.  You have to generate names dynamically like:
<Rating
   name={item.name}
   value={item.value}
   precision={0.5}
   onChange={(e, value) => { console.log("on change", item, value) }}
/>

