Handle multiple Checkboxed in a State:Array. How to?

Question

I have a long list of checkboxes (not that optimised) and I want to get them in a state:Array(the checked one) and I'm not really sure how to handle it hope for help(should also handle uncheck when clicked)...

the question is how do I HandleCheckbox.

this.state = {
  checkboxed: [],
}

<div className=' row float-center d-flex justify-content-center '>
<label className='m-3'>
    <input name='1' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    1
</label>
<label className=' m-3'>
    <input name='1.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    1.5
</label>
<label className=' m-3'>
    <input name='2' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    2
</label>
<label className=' m-3'>
    <input name='2.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    2.5
</label>
<label className=' m-3'>
    <input name='3' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    3
</label>
<label className=' m-3'>
    <input name='3.5' type='checkbox' checked={this.state.isGoing} onChange={this.handleInputChange} />
    3.5
</label>
</div>

Does this answer your question? [Correct modification of state arrays in ReactJS](https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs) — jmargolisvt, Nov 29 '20 at 16:12

score 1 · Answer 1 · edited Nov 30 '20 at 17:31

1

you should be able to set the state with the appropriate value in the this.handleInputChange function.

something like this:

handleInputChange = (event) => {
    const self = this;
    if (event.currentTarget.checked) {
        const stateValues = self.state.checkboxed;
        stateValues.push(event.currentTarget.name;
        self.setState({ checkboxed: stateValues });
    }
}

edited Nov 30 '20 at 17:31

Shahnawaz Hossan

2,695
2
13
24

answered Nov 29 '20 at 16:11

Ron

99
2

Shahnawaz Hossan · Accepted Answer · 2020-11-29T16:43:47.490

1

You can add as many checkboxes as you want by creating an array of objects. Ideas are as follows:

Create an array of objects of checkboxes:

const checkboxes = [
  {
    name: '1',
    key: '1',
    label: '1',
  },
  {
    name: '1.5',
    key: '1.5',
    label: '1.5',
  },
  {
    name: '2',
    key: '2',
    label: '2',
  },
  {
    name: '2.5',
    key: '2.5',
    label: '2.5',
  },
  {
    name: '3',
    key: '3',
    label: '3',
  },
  {
    name: '3.5',
    key: '3.5',
    label: '3.5',
  }
];

Create a Checkbox component like this.

const Checkbox = ({ type = 'checkbox', name, checked = false, onChange }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);

Declare a map as a state so that you can get or update a specific checkbox.

this.state = {
    checkedItems: new Map(),
}

Update your state in the function when clicked on checkbox.

handleChange(e) {
    const item = e.target.name;
    const isChecked = e.target.checked;
    this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
}

All together: your App.js file should be like this

import React from 'react';

const Checkbox = ({ type = 'checkbox', name, checked = false, onChange }) => (
  <input type={type} name={name} checked={checked} onChange={onChange} />
);

const checkboxes = [
  {
    name: '1',
    key: '1',
    label: '1',
  },
  {
    name: '1.5',
    key: '1.5',
    label: '1.5',
  },
  {
    name: '2',
    key: '2',
    label: '2',
  },
  {
    name: '2.5',
    key: '2.5',
    label: '2.5',
  },
  {
    name: '3',
    key: '3',
    label: '3',
  },
  {
    name: '3.5',
    key: '3.5',
    label: '3.5',
  }
];

export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      checkedItems: new Map(),
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const item = e.target.name;
    const isChecked = e.target.checked;
    console.log(item);
    console.log(isChecked);
    this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));
  }

  render() {
    return (
      <div className='row float-center d-flex justify-content-center'>
        {
          checkboxes.map(item => (
            <label key={item.key} className='m-3'>
              <Checkbox name={item.name} checked={this.state.checkedItems.get(item.name)} onChange={this.handleChange} />
              {item.name}
            </label>
          ))
        }
      </div >
    )
  }

}

edited Nov 29 '20 at 16:43

answered Nov 29 '20 at 16:28

Shahnawaz Hossan

2,695
2
13
24

I think thats your god by himself. if its possible to keep contact I will be happy – LearningReact Nov 29 '20 at 16:55
Sorry, which contact? Also, upvote can be really appreciating :) – Shahnawaz Hossan Nov 29 '20 at 16:58
like discord skype or something – LearningReact Nov 29 '20 at 16:59
This is my skype: `Pabon_CSE`, you can mail me as well. I use skype very rarely. – Shahnawaz Hossan Nov 29 '20 at 17:02
what is your mail? – LearningReact Dec 02 '20 at 06:16
i can an error that say : Cannot read property 'setState' of undefined but I defined it... – LearningReact Dec 02 '20 at 06:19
Are you using Class component or Functional Component? This is an example of class component. It should work. Working in my case. Just write the code exactly given in step 5. – Shahnawaz Hossan Dec 02 '20 at 06:36
did it my probleme after i get it how do i put all the values i a array to pass it in emailjs. – LearningReact Dec 02 '20 at 12:07
when i console.log(checkedItems i get) Map(2) {"1" => true, "1.5" => true} – LearningReact Dec 02 '20 at 12:09
i want only the true value. – LearningReact Dec 02 '20 at 12:20
If you want a specific value you can do this: `checkedItems.get(item)`, here item is the name of the checkbox. – Shahnawaz Hossan Dec 02 '20 at 12:30
i want all the values that are tru in the checkedItems – LearningReact Dec 02 '20 at 12:47
mail me at `prerajulization01@gmail.com` – Shahnawaz Hossan Dec 02 '20 at 14:14

Handle multiple Checkboxed in a State:Array. How to?

2 Answers2

Linked