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
– Brian Thompson

2020-02-10 17:45:25 +00:00
Commented Feb 10, 2020 at 17:45 — Brian Thompson
– Brian Thompson, Commented Feb 10, 2020 at 17:45
@BrianThompson Can you give me any suggestions?

Pulse Nova
– Pulse Nova

2020-02-10 17:49:44 +00:00
Commented Feb 10, 2020 at 17:49 — Pulse Nova
– Pulse Nova, Commented Feb 10, 2020 at 17:49

Brian Thompson · Accepted Answer · 2020-02-10 18:57:53Z

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, 2020 at 18:57

answered Feb 10, 2020 at 17:59

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

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

5 Comments

Brian Thompson Over a year ago

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.

Pulse Nova Over a year ago

When I click on the checkbox I got this error: TypeError: prevState[blockName] is not iterable

Brian Thompson Over a year ago

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.

Pulse Nova Over a year ago

Yeah, array is empty by default.

Brian Thompson Over a year ago

I just updated it to check if the array exists first, if not it creates one.

rMonteiro · Accepted Answer · 2020-02-11 10:18:07Z

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, 2020 at 10:18

answered Feb 10, 2020 at 17:56

rMonteiro

1,7241 gold badge17 silver badges42 bronze badges

3 Comments

Brian Thompson Over a year ago

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 Over a year ago

React docs: "Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable."

rMonteiro Over a year ago

@BrianThompson you are right, I updated the answer and posted the code

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related