React 컴포넌트를 부르면 여러개가 나옵니다

Question

구인구직 사이트를 프로젝트로 만들고 있습니다체크박스를 누르면 해당 체크박스에 해당하는것만 나오게 하고 싶은데 아래 사진처럼 글이 3개면 체크박스도 3줄이 나오고2개면 두줄이 나옵니다 그리고 제일 위에 있는 체크박스는 가장 최신글 두번째줄은 최신글 바로전글이랑 연결되어 있어뭘 눌러도 첫번째줄 체크박스를 누르면 가장 최신글이 나옵니다코드를 어떻게 수정해야 할까요? 체크박스 검색을 인터넷에 있는대로 하고 싶어도 제가 따라한 사이트랑 너무 달라서 어딜 손대야할지 몰라서 최대한 사이트에서 한대로 조합해 봤는데 이렇게 됐습니다체크박스 컴포넌트import React, {useEffect, useState} from "react"; import {useNavigate} from "react-router-dom"; import "../css/Recommend.scss"; export const Checkbox = ({board_id, title, content, img_url, username, date}) => { const navigate = useNavigate(); //체크박스 검색 const [search, setSearch] = useState(""); const [clk, setClk] = useState(false); const [fp, setFp] = useState(false); //체크박스 검색 function checkMenu1(){ setSearch("React"); setFp(true); } function checkMenu2(){ setSearch("제과제빵"); setFp(true); } function checkMenu3(){ setSearch("자동차정비"); setFp(true); } function checkMenu4(){ setSearch("의사"); setFp(true); } function checkMenu5(){ setSearch("초등교사"); setFp(true); } useEffect(()=>{ if(content.indexOf(search) != -1 || search.toLocaleLowerCase().indexOf(content) != -1){ setClk(true); } else{ setClk(false); } }, []); return(

React 제과제빵 자동차정비사 의사 초등교사

{fp ?

{ navigate(`/board/${board_id}`) }}>

{title}

{username}

{date}

: null}

); };불러오는 게시판 코드{boardList.map((item, index) => ( ))}

덤엔더머 · Answer

{boardList.map((item, index) &#61;> ( <Checkbox username&#61;{item.user.username} date&#61;{moment(item.created).add(9, &#34;hour&#34;).format('YYYY-MM-DD')} title&#61;{item.title} content&#61;{item.content} board_id&#61;{item.id} img_url&#61;{&#96;/api/image/view/${item.id}&#96;} /> ))} 맵의 갯수 만큼 체크 박스 셋을 만드시는 것 같네요..

React 컴포넌트를 부르면 여러개가 나옵니다

1개의 답변

#component 목록