리액트 jsx 내 조건문
본문
안녕하세요. 리액트 배우고 있는데 component 내에서, 조건문을 어떻게 써야할까요..? 계속 오류가 나네요..
return 문안의 map 함수 안에서 조건문으로 다른 것으로 출력을 하려는데, 뭐가 잘못된걸까요?..
조건문으로 selectbox와 checkbox로 나눠서 출력을 달리 하려합니다. 조언 부탁드립니다...ㅠ
const Filterlist = () => {
//중략..
return (
<div>
{fiters.map((filter) => (
//selectbox일때
filter.type == 'selectbox' &&
<div className="filter_selector" key={filter.queryName}>
<select onChange={(e) => setFilteredData({ [filter.queryName]: e.target.value })} placeholder={filter.placeholder} >
{filter?.items?.map((item) => (
<option value={item.value} key={item.value}>
{item.name}
</option>
))}
</select>
</div>
//checkbox 일때
filter.type == 'checkbox' &&
<div>여기는 체크박스 들어감</div>
))}
</div>
)
}
export default Filterlist
답변 1
{filters.map((filter) => {
return (
<div>
{filter.type == 'selectbox' &&
<>
<div className="filter_selector" key={filter.queryName}>
<select onChange={(e) => setFilteredData({ [filter.queryName]: e.target.value })} placeholder={filter.placeholder} >
{filter?.items?.map((item) => (
<option value={item.value} key={item.value}>
{item.name}
</option>
))}
</select>
</div>
{filter.type == 'checkbox' &&
<div>여기는 체크박스 들어감</div>
}
</>
}
</div>
)
})}
고맙습니다.
답변을 작성하시기 전에 로그인 해주세요.