React add/remove item to array if checkbox is selected/not selected? (Hooks, not class based component)

Question

I've been looking around different answers but all of them are jQuery related or very complex for what I have in mind? I am working in a form and want that when user checks a box, its value should be added to an array storing info in the parent component. If box is unchecked, remove that item from array.

Code trimmed for simplicity

const Knowledge = (props) => {
  const checkHandler = (e) => {
    const tools = props.data.usesTools; //Array in parent component
    const value = e.target.value; //Checkbox value
    tools.includes(value) //If Array contains value
      ? tools.filter((tool) => tool.value != value) // Then remove item from Array
      : tools.push(value) // Else, push item to Array;
  };


return (
    <div> 
      <label>
        <input
          type="checkBox"
          name="usesTools"
          value="Slack"
          onChange={checkHandler}
          />
          Slack
      </label>
    </div>
  //Other checkboxes removed for simplicity
 )
}

Questions:

1) How to add/remove items to Array if checkbox is selected/not selected.

2) I Tried adding a hook to check/uncheck the box but its checking all the boxes as soon the handler is called:

const [ isSelected, setSelected = useState(false);

  <input
    type="checkBox"
    name="usesTools"
    value="Slack"
    onChange={checkHandler}
    checked={isSelected}
  />

Qazi Danish · Accepted Answer · 2020-04-09 21:49:24Z

4

Whether you declare a component as a function or a class, it must never modify its own props. React is pretty flexible but it has a single strict rule: All React components must act like pure functions with respect to their props, as you are modifying props.data.usesTools in the child component. what you need to do is to pass the callback function in Props to child component which will update the usesTools Array, like below

## function to update the usesTools state in parent component ##

const [usesTools,setUsesTools]= React.useState([]);
  const updateUsesTools = (item) => {
    if (usesTools.includes(item)) {
      setUsesTools(usesTools.filter(tool => tool.value != item));
    } else {
      setUsesTools([...usesTools, item]);// or push
    }
  };


 ## function in child component to handle change event ##

  const checkHandler = e => {
    const tools = props.data.usesTools; //Array in parent component
    const value = e.target.value; //Checkbox value

    props.updateUsesTools(value);
  };

edited Apr 9, 2020 at 21:49

answered Apr 9, 2020 at 21:37

Qazi Danish

1561 silver badge5 bronze badges

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

2 Comments

Rodrigo Vila Over a year ago

But data is contained in a big Hook Object like so: const [datos, setDatos] = useState({ fullName: "", email: "", usesTools: [ ], //...tons of data more }) How do I update only usesTools array without touching the rest?

Qazi Danish Over a year ago

No issue you can update only usesTools array of object by doing this. setDatos({...datos,usesTools:[...datos.usesTools,newItem]})

Collectives™ on Stack Overflow

React add/remove item to array if checkbox is selected/not selected? (Hooks, not class based component)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related