[React] CheckBox이용해서 아이템 선택하기

안녕하세요. 오늘은 지난 CheckBox 시간에 이어 오늘은 여러 체크박스를 이용해 아이템을 선택하는 기능을 만들어 볼게요.

 

import './App.css';
import React, { useState } from 'react';
function App() {
  const [items, setItems] = useState(['a','b','c','d']);
  const [selectItems,setselectItems] = useState([]);
  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    if (selectItems.includes(value)) {
      setselectItems(selectItems.filter(item => item !== value));
    } else {
      setselectItems([...selectItems, value]);
    }
  };
  return (
    <div className="App">
        <ul className='selected_ul'>
          {selectItems.map(item =>(
            <li key={item}>{item}</li>
          ))}
        </ul>
        {items.map((item, index) => (
          <>
            <input type="checkbox" value={item} checked={selectItems.includes(item)} 
            onChange={handleCheckboxChange}/>
            <span>{item}</span>
          </>
        ))}
    </div>
  );
}

export default App;

선택한 아이템이 리스트에 추가되어 보일것이고 선택을 해제하면 삭제되는 기능입니다.