Check Box 이용해서 Select option 값 변경하기

체크박스에 있는 값을 필터하는 간단한 작업

import React, { useState } from 'react';
import "./App.css"

const monster = [
  { id: 1, type: "pokemon", name: '피카츄' },
  { id: 2, type: "pokemon", name: '꼬부기' },
  { id: 3, type: "pokemon", name: '치코리타' },
  { id: 4, type: "pokemon", name: '펭도리' },
  { id: 5, type: "digimon", name: '파닥몬' },
  { id: 6, type: "digimon", name: '팔몬' },
  { id: 7, type: "digimon", name: '릴리몬' },
];

function App() {

  const [isChecked, setIsChecked] = useState(false)

  const filteredMonster = monster.filter(item => item.type !== "digimon");

  const handleCheckboxOptionChange = (e) => {
    setIsChecked(e.target.checked);
  };

  return (
    <div className="centered">
      {isChecked ? (
        <select>
          {monster?.map((el) => {
            return (
              <option key={el.id} value={el.id}>
                {el.name}
              </option>
            );
          })}
        </select>
      ) : (
        <select>
          {filteredMonster?.map((el) => {
            return (
              <option key={el.id} value={el.id}>
                {el.name}
              </option>
            );
          })}
        </select>
      )}
      <label>
        <input type="checkbox" checked={isChecked} onChange={handleCheckboxOptionChange} />
        디지몬 포함
      </label>
    </div>
  );
}

export default App;

간소하게 옮겨 적는 와중에, 조금 더 괜찮게 수정할 방법을 찾았다..

실제 프로젝트엔 이런식으로 했는데 지금 찾은 김에 수정해야곘당

 

 

 

import React, { useState } from 'react';
import './App.css';

const monsters = [
  { id: 1, type: 'pokemon', name: '피카츄' },
  { id: 2, type: 'pokemon', name: '꼬부기' },
  { id: 3, type: 'pokemon', name: '치코리타' },
  { id: 4, type: 'pokemon', name: '펭도리' },
  { id: 5, type: 'digimon', name: '파닥몬' },
  { id: 6, type: 'digimon', name: '팔몬' },
  { id: 7, type: 'digimon', name: '릴리몬' },
];

function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxOptionChange = (e) => {
    setIsChecked(e.target.checked);
  };

  const monsterList = isChecked ? monsters : monsters.filter((monster) => monster.type !== 'digimon');

  return (
    <div className="centered">
      <select>
        {monsterList.map((monster) => (
          <option key={monster.id} value={monster.id}>
            {monster.name}
          </option>
        ))}
      </select>
      <label>
        <input type="checkbox" checked={isChecked} onChange={handleCheckboxOptionChange} />
        디지몬 포함
      </label>
    </div>
  );
}

export default App;

첨부터 monsterList를 정의할 때, isChecked 상태를 받아주면 됐었는데,

옵션 리스트를 필터해야된다는 생각만 해가지고 그랬나보다.!