Не пойму как выбрать только один checkbox?

Question

[Mdmitr]

Как выбрать только один checkbox? Не знаю как event привязать
При клике по любому чекбоксу выбирается только верхний

import React, { Component } from "react";

const choise = [
  { name: "Все", value: -1 },
  { name: "Яблоко", value: 0, checked: true },
  { name: "Груша", value: 1, checked: true },
  { name: "Арбуз", value: 2, checked: true },
  { name: "Абрикос", value: 3, checked: true }
];

class Filters extends Component {
  state = {
    checked: false
  };

  onHandleChange = e => {
    console.log(e.target.value);
    this.setState(({checked}) => {checked: !checked})
  };

  render() {
    return (
      <div className='filters'>

        <div className='stops-quantity'>
          <p className='currency__name'>Выбрать</p>

          {choise.map((item, i) => {
            return (
              <div className='check' key={i}>
                <input
                  className='stops__checked'
                  type='checkbox'
                  id='check1'
                  value={item.value}
                  checked={this.state.checked}
                  onChange={this.onHandleChange}
                />
                <label className='stops__label' htmlFor='check1'>
                  {item.name}
                </label>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

export default Filters;

Answer 1

[Антон Спирин]

Вам надо хранить состояние массива чекбоксов и в обработчике изменять только состояние чекнутого.
Обработка нескольких элементов Input

пример

import React, { Component } from "react";

class Filters extends Component {
  state = {
    form: [
      { label: "Все", name: "all", value: -1 },
      { label: "Яблоко", name: "apple", value: 0, checked: true },
      { label: "Груша", name: "pear", value: 1, checked: true },
      { label: "Арбуз", name: "watermelon", value: 2, checked: true },
      { label: "Абрикос", name: "apricot", value: 3, checked: true }
    ]
  };

  onHandleChange = e => {
    const { checked, name } = e.target;
    const { form } = this.state;
    const index = form.findIndex(item => item.name === name);
    const item = form[index];
    const newForm = [...form];
    newForm[index] = { ...item, checked };

    this.setState({ form: newForm });
  };

  render() {
    return (
      <div className="filters">
        <div className="stops-quantity">
          <p className="currency__name">Выбрать</p>
          {this.state.form.map(item => (
            <div className="check" key={item.name}>
              <input
                className="stops__checked"
                type="checkbox"
                name={item.name}
                value={item.value}
                checked={item.checked}
                onChange={this.onHandleChange}
              />
              <label className="stops__label" htmlFor="check1">
                {item.label}
              </label>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default Filters;

Comments

[Mdmitr]

Проблема в том что всегда выбирается только верхний чекбокс куда не кликай
Если делать без перебора массива через .map все работает

[Антон Спирин]

Mdmitr, объясните как по-вашему один ключ состояния this.staet.checked должен иметь разные значения?
И без перебора ваш код не будет работать, у вас в хандлере ошибка.
Почитайте документацию по ссылке.

[Mdmitr]

Антон Спирин, я хотел сделать более просто и читабельнее
например менять чекбокс только у переменной 'a'
onHandleChange = e => {
const a = e.target.value
console.log(a)
};

[Mdmitr]

Антон Спирин, да, теперь value у каждого чекбокса свой, не увидел у себя ошибку

[Mdmitr]

Антон Спирин, понятно, но я попробую еще перебрать массив через .forEach
onHandleChange = e => {
const a = e.target.value
a.forEach(item => {
item.checked = (item.value === value) ;
});
};

[Mdmitr]

Mdmitr, не работало только потому что у input было id='check1' а нужно было динамически