handling multiple checkboxs and push or filter values based on selection

Question

how to handle checkbox is selected or not and push the object if selected and remove if unselected?

this is the initial arr set to state

let arr=[{lable:lable1,value:value1}
{lable:lable2,value:value2}
{lable:lable3,value:value3}
]

handle function triggered on selecting checkbox

  function handleChange(item) {
        let temp = [...arr];
     if (temp.includes(item.value)) {
       temp = temp.filter((value) => value != item.value);
     } else {
       temp.push(item.value);
     }
     setState(temp);
  }

multiple checkbox iterated based on array

      {arr.map((item, i) => {
        return (
             
                <label className="check-wrap">
                  <input
                    className="check-field"
                    checked={ ? } // how to handle checkbox is selected or not
                    name={item.lable}
                    onChange={() => handleChange(item)}
                    type="checkbox"
                  />
                  <span className="check-label">{item.value}</span>
                </label>
            </div>
))}

issue in codesandbox

Samuel Hulla · Accepted Answer · 2021-06-20 17:02:33Z

1

You should use prevState instead of referencing the state value directly.

// ... rest of the onChange function
this.setState(prevState => ({
 arr: prevState.arr.includes(temp)
    ? prevState.arr.filter(value => value !== item.value)
    : [...prevState.arr, temp]
}))

You can read up on setState operations in reactjs here

Hooks works on the same principle:

const [arr, setArr] = useState([])

// ...later
setArr(prevArr => prevArr.includes(temp)
  ? prevArr.fitler(value => value !== item.value)
  : [...prevArr, temp]
)

edited Jun 20, 2021 at 17:02

answered Jun 20, 2021 at 15:46

Samuel Hulla

7,2808 gold badges46 silver badges82 bronze badges

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

3 Comments

Hithesh kumar Over a year ago

how to do in useState hooks ?

Hithesh kumar Over a year ago

codesandbox.io/s/vigorous-moon-4inbh?file=/src/App.js can u please look into this code sandbox and see the issue in my code. Thanks in advance

Samuel Hulla Over a year ago

codesandbox.io/s/friendly-khorana-wwjou?file=/src/App.js

Collectives™ on Stack Overflow

handling multiple checkboxs and push or filter values based on selection

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related