React
React(99) 버튼 클릭시 동적으로 테두리색 변경하기
새발개발JA
2023. 9. 6. 11:22
반응형
작년인가 재작년에 임시저장만 해놓고 미루다 정리해놓은게 아까워서 올려본다.
아주 심 - 플하게 동작하는 버튼 선택 기능이다 :)

버튼 인덱스를 저장할 상태 변수를 만들자
const [selectedIndex, setSelectedIndex] = useState<number>(0);
핵심은 클릭해서 저장된 selectedIndex 와 === 매핑된 index 가 같을 경우에만 active 클래스가 추가 된다는 점이다.
<div>
{buttonItems.map((item, index) => (
<div
key={index}
className={`${ // selectIndex 와 map 배열의 인덱스가 같은 것만 active 라는 클래스가 붙는다.
selectedIndex === index ? 'active' : ''
}`}
onClick={() => setSelectedIndex(index)}
>
{item.title}
</div>
))}
</div>
반응형