반응형
const cities = [
{id: 1, name: "#전체"},
{id: 2, name: "#서울"},
{id: 3, name: "#경기"},
{id: 4, name: "#인천"}
]
function Main() {
const [selectedCity, setSelectedCity] = useState(cities[0].id);
const selectCity = (cityId:number) => {
setSelectedCity(cityId)
}
return <div>
{cities.map((city) =>
<button className={city.id === selectedCity ? "bg-blue-500 hover:bg-blue-700 text-white p-1 rounded-full mx-2" : "mx-2"}
key={city.id}
onClick={() => selectCity(city.id)}>
{city.name}
</button>)}
</div>
}
반응형
'[React] > [React Code]' 카테고리의 다른 글
[React Code] 다중 라디오버튼(radio) 생성 (상태 관리 [전역 Redux]) (1) | 2024.02.07 |
---|---|
[React Code] 다중 체크박스(checkbox) 구현 (상태 관리 [전역 Redux / 지역]) → 배열로 상태관리 (0) | 2024.02.07 |
[React Code] React Query V5 무한 스크롤 구현하기 (0) | 2024.01.16 |