Final Project Devlog 10

앞서 모달에서 edit 누르면
navigate(/forum/edit/${debate.debateInfo.id}); 를 통해 edit 페이지로 이동하므로
edit 페이지에서는 console.log(debate.debateInfo.id)로 해당 debate id를 가져올 수 있다.
const debate_id = useParams(); -> params로 들어오는 debate.debateInfo.id 를 debate_id라는 변수로 지정한다.

radio button에서 이전 값 가져와 반영하기 (defaultChecked)

기능

Edit page로 들어왔을 때, 작성자가 원래 Pros를 선택했다면 Pros가 눌려져있고, Cons를 선택했다면 Cons가 눌러져있게 만들었다. defaultChecked 를 사용하면 1초컷!
(들어온 정보의 pros_id가 null이냐 cons_id가 null이냐에 따라 식별한다)
여기서 마음대로 클릭하면 변경되어 서버에 보내지는 것 까지 구현했다.

    <div>
        {debateInfo.pros_id !== null ? (
          <>
            <input type="radio" onClick={clickPros} name="position" value="pros" defaultChecked="pros"></input> <span>Pros</span>
            <input type="radio" onClick={clickCons} name="position" value="cons"></input> <span>Cons</span>
          </>
        ) : (
          <>
            <input type="radio" onClick={clickPros} name="position" value="pros"></input> <span>Pros</span>
            <input type="radio" onClick={clickCons} name="position" value="cons" defaultChecked="cons"></input>
            <span>Cons</span>
          </>
        )}
      </div>