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 — jmargolisvt
– jmargolisvt, Commented Nov 29, 2020 at 16:12

Shahnawaz Hossan · Accepted Answer · 2020-11-29 16:43:47Z

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, 2020 at 16:43

answered Nov 29, 2020 at 16:28

Shahnawaz Hossan

2,7062 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

LearningReact Over a year ago

I think thats your god by himself. if its possible to keep contact I will be happy

Shahnawaz Hossan Over a year ago

Sorry, which contact? Also, upvote can be really appreciating :)

LearningReact Over a year ago

like discord skype or something

Shahnawaz Hossan Over a year ago

This is my skype: Pabon_CSE, you can mail me as well. I use skype very rarely.

LearningReact Over a year ago

what is your mail?

|

Shahnawaz Hossan · Accepted Answer · 2020-11-30 17:31:21Z

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, 2020 at 17:31

Shahnawaz Hossan

2,7062 gold badges15 silver badges24 bronze badges

answered Nov 29, 2020 at 16:11

Ron

1172 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related