React JS: работа с несколькими checkbox

Question

Нужно вывести словами, какие галочки отмечены, какие нет. Данный код не работает с несколькими checkbox. Подскажите, пожалуйста, что нужно дописать?

const [checked, setChecked] = useState(true);
    let msg;
    if(checked) {
        msg = <span>галочка есть</span>
    } else {
      msg = <span>галочки нет</span>
    }

    return (
        <ul className='flex flex-col gap-4 m-4'>
            {
                arr.map(o => <li key={o.id} className='border-b-2 border-gray-800 pb-2'>
                    <div className='flex gap-2 text-2xl'>
                        {o.id} : 
                        <h1>{o.title} </h1>
                     </div>
                    <input 
                        type="checkbox" 
                        value={o.id}
                        onChange={() => setChecked(!checked)} 
                    />
                    <span>{msg}</span>
                </li>
                )
            }
            &emsp; &emsp;
        </ul>
    );

Answer 1

Сделай компонент из li и стейт чекбокса помести в него.

Answer 2

Создайте компонент для checkbox и хранения состояния в нем

const InputCheck = ({ elem }) => {
  const [check, setCheck] = useState(false);

  const handleClick = () => {
    setCheck(e => !e);
  }
  
  return (
    <div>
      <input type='checkbox' onChange={handleClick} checked={check} />
      {check && <div>{elem.title} - выбрано</div>}
    </div>
  )
}

И добавляем данный компонент в исходный рендер массива

{arr.map(o => <li key={o.id}>
      <div>
        {o.id} : 
      <h1>{o.title} </h1>
    </div>
  <InputCheck elem={o} />
</li>)}

Полный рабочий пример в песочнице

Answer 3

Данный код не работает с несколькими checkbox

Я тебе на другом форуме уже писал - нужно придумать стейт для хранения этой информации.

//
const Itm = React.memo(({obj, edit}) => {
  const act = _ => edit(a => a.map(o => o.id === obj.id
    ? {...o, ok: !o.ok}
    : o
  ))
  const v = 'Кнопка ' + (obj.ok ? 'вкл': 'выкл')
  return <li>
    <p>{obj.title}</p>
    <label>
      <input type='checkbox' onChange={act} value={obj.ok} />
      <span>{v}</span>
    </label>
  </li>
})

//
function App(){
  const [arr, setArr] = React.useState([])
  React.useEffect(_ => setArr(data()), [])
  return <ul>
    {arr.map(o => <Itm key={o.id} obj={o} edit={setArr} />)}
  </ul>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

//
function data(){
  return Array.from({length: 5}, (_, i) => ({
    id: i, title: 'Задание ' + i, ok: false
  }))
}

<div id="like_button_container"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

БЛОГ НА HUSL

React JS: работа с несколькими checkbox

Ответы (3 шт):