Реагировать добавить / удалить элемент в массив, если флажок установлен / не установлен? (Крючки, не основанные на классах компоненты)

Question

Я искал разные ответы, но все они jQuery связаны или очень сложны для того, что я имею в виду? Я работаю в форме и хочу, чтобы, когда пользователь устанавливает флажок, его значение добавлялось в массив, хранящий информацию в родительском компоненте. Если флажок снят, удалите этот элемент из массива.

Код обрезан для простоты

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
 )
}

Вопросы:

1) Как добавить / удалить элементы в массиве, если установлен флажок выбрано / не выбрано.

2) Я пытался добавить ловушку, чтобы поставить / снять флажок, но проверяет все флажки, как только вызывается обработчик:

const [ isSelected, setSelected = useState(false);

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

Answer 1

Независимо от того, объявляете ли вы компонент как функцию или класс, он никогда не должен изменять свои собственные свойства. React довольно гибок, но имеет одно строгое правило: все компоненты React должны действовать как чистые функции по отношению к их объектам, так как вы изменяете props.data.usesTools в дочернем компоненте. вам нужно передать функцию обратного вызова в Props дочернему компоненту, который обновит массив usesTools, как показано ниже

## 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);
  };