javascript - 1 All instances of a component reference the first instance instead of itself; 2 Children props get updated only after calling parent's setState twice

Question

UPDATE: I easily fixed the first issue by providing unique names for all the 'Rating' components, but the question about 2 x setState fixing props remains open.

I actually have two questions. The second one emerged from trying to solve the first one. The initial problem was that 'this' in each of the onChange Rating's property in each of the SongScoring components pointed to the first instance of the SongScoring class instead of itself:

Parent code:

import React, { Component } from 'react';
import './Assess.css';
import { Accordion } from 'react-bootstrap';
import SongScoring from './SongScoring';

class Assess extends Component {
  constructor(props) {
    super(props);

    const songs = [
      {
        track: "song1",
      },
      {
        track: "song2",
      },
      {
        track: "song3",
      },
      {
        track: "song4",
      },
    ]

    this.state = {
      songs: songs,
    };
  }

  render() {
    return (
      <div className="root">
        <Accordion defaultActiveKey="0">
          {
            this.state.songs.map((song, index) => (
              <SongScoring song={song} key={index.toString()} index={index} />
            ))
          }
        </Accordion>
      </div>
    );
  }
}

export default Assess;

question from:https://stackoverflow.com/questions/65912738/1-all-instances-of-a-component-reference-the-first-instance-instead-of-itself-2

Answer 1

Waitting for answers