리액트 jsx 내 조건문 채택완료

안녕하세요. 리액트 배우고 있는데 component 내에서, 조건문을 어떻게 써야할까요..? 계속 오류가 나네요..

return 문안의 map 함수 안에서 조건문으로 다른 것으로 출력을 하려는데, 뭐가 잘못된걸까요?..

조건문으로 selectbox와 checkbox로 나눠서 출력을 달리 하려합니다. 조언 부탁드립니다...ㅠ

 

Copy
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개

채택된 답변
+20 포인트

Copy
{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>

        )

      })}
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

고맙습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고