React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자)

조건

클릭한 글의 제목이 모달에 뜨게 만들기

---

풀이

function App() {
  let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']);
  let [modal, setModal] = useState(false);
  let [titleindex,  setTitleindex] = useState(0);

  return (
    <div className="App">
      { 
        title.map(function(a,i){
          return (
          <div className="list" key={i}>
            <h4>{ title[i] }</h4>
            <button onClick={()=>{ modal ? setModal(false) : (setModal(true), setTitleindex(i)) } }>🗨</button>
            <p>2월 18일 발행</p>
          </div>
          );
        }) 
      }
      {modal && <Modal title={title} titleindex={titleindex}/>}
    </div>
  );
}
function Modal(props){
  return(
    <div className='modal'>
      <h4>{ props.title[props.titleindex] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

1. let [titleindex,  setTitleindex] = useState(0);로 글 제목의 인덱스 state를 만들었다.
2. 부모의 modal을 생성하는 위치에 {modal && <Modal title={title} titleindex={titleindex}/>}로 titleindex를 props로 전송했다.
3. 자식 modal의 글 제목에 <h4>{ props.title[props.titleindex] }</h4> title[i] 형태로 받은 props를 넣어주었다.
4. 부모의 modal을 토글하는 버튼에 setModal(true)와 함께 titleindex state를 바꿔주는 함수를 같이 넣어주었다.

---

알게 된 점

자식 modal에서 title의 index를 어떻게 넘겨받을지 계속 시도했는데, 숫자값만 반환하는 새로운 state를 만들면 된다는 쉬운 사실을 간과했다.

---

출처 : 코딩애플 https://codingapple.com/