I don't understand how to select only one checkbox?

Question

JavaScript

How to select only one checkbox? I don’t know how to attach an event
When clicking on any checkbox, only the top one is selected

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

You need to store the state of the array of checkboxes and change only the state of the checked one in the handler.
Handling Multiple Input Elements

example

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;