Unable to store the values from checkbox into functional state in ReactJS

Question

I have created a functional component and state hook. I want to push all the checked items into a particular array of e.target.name of the useState hook.

  const [formInput, setFormInput] = useState({
    areaOfInterest: []
  });

This handle I got help from an stackoverflow post: I want to store the checkbox datas into functional state hook but unable to do

  const handleCheck = ({ target }) => {
    const { name: blockName, checked, value } = target; 
    //console.log(value);
    if (checked) {
      formInputt[blockName].push(value); 
    } else {
      const index = formInputt[blockName].indexOf(value);
      formInputt[blockName].splice(index, 1);
    }

    setFormInputt(formInputt); 
  };


  <Form.Group>
    <Form.Label>Area of Interest</Form.Label>
    <Form.Check
      name="areaOfInterest"
      label="Dedicated Teams"
      onChange={handleCheck}
      value="Dedicated Teams"
    />
    <Form.Check
      name="areaOfInterest"
      label="Cloud Expert Advice & Support"
      onChange={handleCheck}
      value="Cloud Expert Advice & Support"
    />
    <Form.Check
      name="areaOfInterest"
      label="Software Development"
      onChange={handleCheck}
      value="Software Development"
    />
    <Form.Check
      name="areaOfInterest"
      label="Digital Transformation"
      onChange={handleCheck}
      value="Digital Transformation"
    />
  </Form.Group>

Every time the user clicks on a checkbox, I want to add the value to an array and filter out what isn't there.

I am finding this very difficult and I think it should be quite simple. Can someone point me in the right direction? Is there a way to simply have a function trigger that reads the checked/unchecked status of my form input elements and then updates my state array accordingly?

The handler you copied is not a good one. It mutates state. – Brian Thompson Feb 10 '20 at 17:45 — Brian Thompson, Feb 10 '20 at 17:45
@BrianThompson Can you give me any suggestions? – Pratima Gautam Feb 10 '20 at 17:49 — Pratima Gautam, Feb 10 '20 at 17:49

Brian Thompson · Accepted Answer · 2020-02-10T18:57:53.740

2

Never mutate state. If you find yourself calling an updater like this setState(state), you've done something wrong.

Instead, create a new array or do a map/filter inside the updater. The best option might be to do it all inside the setter using a functional update.

const handleCheck = ({ target }) => {
  const { name: blockName, checked, value } = target;
  setFormInput((prevState) => {
    if (prevState[blockName]) {
      if (checked) {
        return { ...prevState, [blockName]: [...prevState[blockName], value] }
      } else {
        return {
          ...prevState,
          [blockName]: prevState[blockName].filter(option => option != value)
        }
      }
    } else { 
      if (checked) { 
        return {
          ...prevState,
          [blockName]: [value]
        }
      } else {
        return prevState
      }
    }
  })
}

edited Feb 10 '20 at 18:57

answered Feb 10 '20 at 17:59

Brian Thompson

13,263
4
23
43

It creates an array out of an object, but I found some issues with that example so I removed it. Try the functional update, I have tested it. – Brian Thompson Feb 10 '20 at 18:15
When I click on the checkbox I got this error: TypeError: prevState[blockName] is not iterable – Pratima Gautam Feb 10 '20 at 18:17
Is it not defaulted to an empty array like your example? I guess this assumes it is. I can update the answer to account for it if that's what is needed. – Brian Thompson Feb 10 '20 at 18:24
Yeah, array is empty by default. – Pratima Gautam Feb 10 '20 at 18:26
1

I just updated it to check if the array exists first, if not it creates one. – Brian Thompson Feb 10 '20 at 18:58

rMonteiro · Answer 2 · 2020-02-11T10:18:07.713

1

You want a handle that pushes the selected checkboxes to the array areaOfInterest inside formInput right?

Edit:

const handleCheck = ({ target }) => {
    const { name: blockName, checked, value } = target;

    setFormInput(prevState => {
      if (checked) {
        return { 
          ...prevState, 
          [blockName]: [...prevState[blockName], value] 
        }
      } else {
        return {
          ...prevState,
          [blockName]: prevState[blockName].filter(element => element !== value)
        }
      }
    })
  }

Check the example: https://codesandbox.io/s/admiring-bohr-58wh4?fontsize=14&hidenavigation=1&theme=dark

edited Feb 11 '20 at 10:18

answered Feb 10 '20 at 17:56

rMonteiro

1,371
1
14
37

Your answer should contain the actual answer, not a link off-site. Also the actual answer itself mutates state which is against the rules of react – Brian Thompson Feb 10 '20 at 18:00
[React docs](https://reactjs.org/docs/react-component.html#state): "Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable." – Brian Thompson Feb 10 '20 at 18:04
1

@BrianThompson you are right, I updated the answer and posted the code – rMonteiro Feb 11 '20 at 10:42

Unable to store the values from checkbox into functional state in ReactJS

2 Answers2