Only check the clicked Switch, not working

Images
Related searches

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

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 :

  1. 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"
      />
)
  1. 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.

Mouse Left-Click Button Not Working? Here's How to Fix It, If the mouse's left-click button doesn't work, only sometimes Mouse and ensure “Switch primary and secondary buttons” isn't checked. However, quite a few users report the Samsung Smart Switch not working issue now and then. If you’re having trouble transferring content with Smart Switch, don’t worry, we collect the most common Samsung Smart Switch problems and the related solutions. Let’s get it on this troubleshooting.

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"
 />

Left Joycon analog stick not clicking in, Left analog stick on my joycon is not clicking in ( not working ) can i get my Hello, I was just playing my Nintendo switch and my analog button� In our experience, most mouse left-click (or right-click) issues point to hardware failure. If the mouse’s left-click button doesn’t work, only sometimes responds, accidentally “unclicks” as you drag, misclicks, or double-clicks when you click once, that’s a pretty good sign there’s something wrong with the hardware in the left-click button itself.

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.

Clicking Icon on Taskbar Does Not Switch to Program, Clicking Icon on Taskbar Does Not Switch to Program If multiple programs are running in full-screen mode or an open program On the Taskbar Options tab, click the Always On Top check box to select it, and then click OK. When a white wire is attached to a 3-way switch a tester may not read the power because of the position of the other 3-way switch. If you have several light switches or light fixtures that are not working then there may be a short in the electrical wiring, or most likely a loose connection has developed.

Respond to CheckBox Clicks, In the Click event handler, use the Checked property to determine the control's state, and be processed separately; that is, the CheckBox control does not support the double-click event. EventArgs e) { switch(checkBox1. Normally, a bad relay or blown fuse is the cause of this problem. The drivers master switch may also be the cause. 2. Only one window stops working. If only one window stops working, the problem could be a bad relay, fuse issue, bad motor, or the power window switch has failed.

Chevrolet Silverado 1500 Questions, switch quit working, passenger window switch would work but the rear windows nor the Checked wire Larger (Red/White) just before it entered door panel. the only thing that i heard is a sort of a "click" that comes frome the switch, nothing � Press ALT+TAB to switch to another program. Click Start, point to Settings, and then click Taskbar & Start Menu. On the Taskbar Options tab, click the Always On Top check box to select it, and then click OK.

Aside from checking the pump, check your water pressure gauge to ensure that it’s working before diagnosing a pressure switch issue. Switch Clicks On and Off Repeatedly If your pump seems to be cycling (turning on and off repeatedly), there are a few common causes. One of the most frequent culprits is a blown bladder in the water tank.

Comments
  • You should change the title of the question so it can be easily found by users. Something like : "How to use state for checkboxes in a loop with React"