Only check the clicked Switch, not working - reactjs

Question

I want to check only the clicked Switch, but if i click on a Switch, all Switches are toggle.
class LoadMeister extends Component {
constructor(props) {
super(props);
this.state = {
daten: [],
isLoading: true,
checked: false
};
this.userUpdate = this.userUpdate.bind(this);
}
userUpdate(checked) {
this.setState({ checked });
}
[...]
render() {
const ListeUser = this.state.daten.map(meister => (
<Col md={2} xs={3} sm={3} className="karten">
<h3
title={meister.SD_Vorname}
style={{
fontWeight: "bold",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap"
}}
>
{meister.SD_Vorname} {meister.SD_Nachname}
</h3>
<hr />
<p />
<FaBeer size="2em" />
<FaBeer size="2em" style={{ float: "right" }} />
<div style={{ marginTop: "10px" }}>
<Switch
key={meister.SD_Emplid}
width={151}
onChange={this.userUpdate}
checked={this.state.checked}
offColor="#A5C9D7"
onColor="#00556A"
/>
</div>
</Col>
));
[Return()]
xxxxxxxxxxxxxxxxxxxxxxxxxx
So what i have to do, so that only the clicked Switch is Toggle ?
I use the react-switch Lib.
xxxxxxxxxxxxxxxxxxxxxxxxxx

Answer 1

Try something like:
userUpdate(checkedId) {
this.setState({ checkedId:id });
}
...rest of your code
<Switch
key={meister.SD_Emplid}
width={151}
onChange={()=>this.userUpdate(meister.SD_Emplid)}
checked={this.state.checkedId===meister.SD_Emplid}
offColor="#A5C9D7"
onColor="#00556A"
/>

Answer 2

Yes indeed, all switches are toggled because you have just one value in your state for all switches : this.state.checked.
You need to make one value for each switch, you can use an array or an object for this :
With an array
// constructor
this.state = {
checked: [] // all switches
};
// Update the checked state at the right index
userUpdate(checked, index) {
const newChecked = this.state.checked
newChecked[index] = checked
this.setState({ checked: newChecked });
}
// render
const ListeUser = this.state.daten.map((meister,index) => (
// More code
<Switch
key={meister.SD_Emplid}
width={151}
onChange={(checked) => this.userUpdate(checked, index)} // We need to know which index is clicked
checked={this.state.checked[index]}
offColor="#A5C9D7"
onColor="#00556A"
/>
)
With an object:
// constructor
this.state = {
checked: {} // all switches, keys will be the daten ids
};
// Update the checked state
userUpdate(checked, id) {
const newChecked = this.state.checked
newChecked[id] = checked
this.setState({ checked: newChecked });
}
// render
const ListeUser = this.state.daten.map(meister => (
// More code
<Switch
key={meister.SD_Emplid}
width={151}
onChange={(checked) => this.userUpdate(checked, meister.SD_Emplid)}
checked={this.state.checked[meister.SD_Emplid]}
offColor="#A5C9D7"
onColor="#00556A"
/>
)
The two solutions are very similar.

Answer 3

You use the checked state for all of your Switch components, which results in the behaviour you experience.
A solution would be to save checked in your meister objects:
userUpdate(index, checked) {
const { daten } = this.state;
daten[index].checked = checked;
this.setState({ daten });
}
/* inside your render */
this.state.daten.map((meister, index) => (
/* ... */
<Switch
{/* ... */}
checked={meister.checked}
onChange={this.userUpdate.bind(this, index)}
/>
));
I use the second argument of .bind to add index as the first argument to the userUpdate function.