CODEWITHSUNDEEP
javascriptreactjs
Sanjana
Sanjana

Reputation: 296

How to toggle the Switch tag using reactjs

My objective is to toggle switch off and on as per the respective id, but i couldn't able to toggle the switch.

i have tried in this way:

   <Switch
                  checked={data.isShow}
                  onChange={this.handleChange}
                  color="primary"
                  name={data.isShow ? "On" : "Off"}
                  inputProps={{ "aria-label": "primary checkbox" }}
                />

And OnChange i have written in this way:

  handleChange = () => {
    this.setState({ isShow: !this.state.isShow });
  };

Here is the sample

Can anyone help me in this query?

Upvotes: 0

Views: 161

Answers (4)

Avani Bataviya
Avani Bataviya

Reputation: 770

No need of state variable just update info array in handleChange(). Below are the changes in handleChange() method

handleChange = (singleRowData) => {
    console.log(singleRowData);
    const {info} = this.state;
    const index = info.findIndex(data => data.id === singleRowData.id);
    info[index].isShow = !info[index].isShow;
    this.setState({ info: [...info] });
  };

Upvotes: 1

zb22
zb22

Reputation: 3231

You need to change the isShow property from the item in the info array (in your state).

you can use find() in order to find the item with the same id,
but before that you need to use slice() to copy info array, because you don't mutate your state.

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

(Referenced from React docs)

your handleChange() method should look like this then:

handleChange = (id) => {
    const data = this.state.info.slice();
    const item = data.find((item) => item.id === id);
    item.isShow = !item.isShow;
    this.setState(data);
  };

Here is the full result:
https://codesandbox.io/s/async-bird-998ue?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 0

Winter
Winter

Reputation: 411

Change handleChange function to:

handleChange = (event) => {
let changeId = parseInt(event.target.id);
let info = this.state.info.map((data) => {
  if (data.id === changeId) {
    return Object.assign({}, data, {
      isShow: !data.isShow
    });
  }
  return data;
});
this.setState({info: info});
};

Include id as part of the Component params

<Switch
  checked={data.isShow}
  onChange={this.handleChange}
  id={data.id}
  color="primary"
  name={data.isShow ? "On" : "Off"}
  inputProps={{ "aria-label": "primary checkbox" }}
/>

Edit: Made edits to the sample link you've provided - it's working here

Upvotes: 0

hgb123
hgb123

Reputation: 14881

You should handleChange for specific element. Here I pass the id of the element, and toggle isShow of that element only

handleChange = (id) => {
  this.setState({
    info: this.state.info.map((i) => {
      if (i.id === id) {
        return {
          ...i,
          isShow: !i.isShow
        };
      } else {
        return i;
      }
    })
  });
};

// ...

<Switch
  checked={data.isShow}
  onChange={() => this.handleChange(data.id)}
  color="primary"
  name={data.isShow ? "On" : "Off"}
  inputProps={{ "aria-label": "primary checkbox" }}
/>

Forked demo

Edit blissful-goodall-8vpg8

Upvotes: 1

Related Questions