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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…