이미지 중복 선택 / 데이터 추가/ css 설정

아이콘을 여러개 설정 하고 그에 따른 css 설정

와 기분 너무 좋음 어떻게 해야할지 막혔었는데 자연 스럽게 풀림

 

const [pickIcon, setPickIcon] = useState<string[]>([]);

const hadleClick = (itemName:string)=>{
    if(pickIcon.includes(itemName)){
      setPickIcon((oldIcons) => oldIcons.filter((icon) => icon !== itemName));
    }else{
      setPickIcon((oldIcons) => [...oldIcons, itemName]);
    }
   
  }

 

oldIcons는 이전 상태값을 의미하는 매개변수

이미지를 클릭해서 기존에 있는 이미지면 제거 하고

아니면 추가 하기

작업 하다 보니 set에서 함수를 넣을 수 있는데 잘 활용 해야겠다

 

<ul className="flex w-full justify-evenly">
      {datas.map((item: ImgType) => (
        <li key={item.id} className={`rounded-lg p-2 ${
          pickIcon.includes(item.name) ? "bg-[#EB934B]" : "hover:bg-[#EB934B]"
        }`}>
          <button onClick={()=>hadleClick(item.name)} type="button">
            <Image src={item.imgurl} width={80} height={80} alt={item.name} />
            <p className="px-1">{item.name}</p>
          </button>
          
        </li>
      ))}
    </ul>

이미지를 클릭 했을대 선택 이미지의 배열에서 선택한 이미지의 정보를 비교 해서

있으면 계속 배경색 있음 아니면 hover