CODEWITHSUNDEEP
javascriptarraysreactjscheckboxuse-state
user16548419
user16548419

Reputation:

Push Multiple checkbox data in array in ReactJs?

I need to push the data in array form, from checkbox value.

Code

import React,{ useState,useEffect } from "react";

export default function App() {

  const [person, setPerson] = useState([]);

  const CheckHandler = () => {
  //  setPerson(() => {     ...person, }) 

  }

  useEffect(() => {
  //Print data each time the checkbox is "checked" or "unchecked"
    console.log(person);
  }, [person]);


  return (
    <>
    <input type="checkbox" id="jane" name="jane" value="jane" onClick={() => CheckHandler()} />
    <label htmlFor="jane">jane</label><br/>

    <input type="checkbox" id="Mike" name="Mike" value="Mike" onClick={() => CheckHandler()} />
    <label htmlFor="Mike">Mike</label><br/>

    <input type="checkbox" id="board" name="board" value="board" onClick={() => CheckHandler()} />
    <label htmlFor="board">board</label><br/>
    
    </>
  );
}

What should I do to get my data in array in my console?

sandbox : https://codesandbox.io/s/adoring-rgb-27wkt

Upvotes: 1

Views: 1955

Answers (1)

Nisharg Shah
Nisharg Shah

Reputation: 19532

Do you want like this and I also added add and removed filter

const CheckHandler = (e) => {
  const value = e.target.value;
  setPerson((prev) =>
    person.includes(value)
      ? prev.filter((cur) => cur !== value)
      : [...prev, e.target.value]
  );
};

FULL CODE

import React, { Fragment, useState, useEffect } from "react";

export default function App() {
  const [person, setPerson] = useState([]);

  const CheckHandler = (e) => {
    setPerson((prev) => [...prev, e.target.value]);
  };

  useEffect(() => {
    //Print data each time the checkbox is "checked" or "unchecked"
    console.log(person);
  }, [person]);

  return (
    <Fragment>
      <input
        type="checkbox"
        id="jane"
        name="jane"
        value="jane"
        onClick={CheckHandler}
      />
      <label htmlFor="jane">jane</label>
      <br />

      <input
        type="checkbox"
        id="Mike"
        name="Mike"
        value="Mike"
        onClick={CheckHandler}
      />
      <label htmlFor="Mike">Mike</label>
      <br />

      <input
        type="checkbox"
        id="board"
        name="board"
        value="board"
        onClick={CheckHandler}
      />
      <label htmlFor="board">board</label>
      <br />
    </Fragment>
  );
}

Codesandbox: https://codesandbox.io/s/twilight-hill-lh9bv?file=/src/App.js:0-986

Upvotes: 1

Related Questions