Q:

Only check the clicked Switch, not working

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

A:

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. 

