modal창 오류 문제

[김우성]

안녕하세요 모달창 부분을 공부하고 있는데 모달창을 제목클릭시 각각 따로 열리도록 만들었습니다.

그런데 모달창을 클릭할때마다 열린 모달창의 제목이 클릭된 모달창 제목으로 바뀝니다.

function App() {

  let [title,titlec] = useState(['나비가 되고싶다', '프론트 엔드정하기', '좋은 책추천', '고인물 안녕하십니까'])
  let [modal,modalc] = useState([false, false, false, false])
  let [number,numberc] = useState(0);
  let [러브,러브첸] = useState([0,0,0,0]);

  function buttonclick () {
    let titlecopy = [...title]
    titlecopy.sort();
    titlec(titlecopy)
  }

  return (
    <>
      <div className="black-nav">
        <div>Lome블로그</div>
      </div>
      <div style={{textAlign : "center" }}>
        <button onClick={buttonclick}>순서정렬</button>
      </div>

      {
        title.map(function(li, idx) {
          return(
            <div className="list" key={idx}>
              <h3>

                <span onClick={()=>{
                  let modalcopy=[...modal];
                  if (modalcopy[idx] === false) {
                    modalcopy[idx] = true;
                  } else{
                    modalcopy[idx] = false;
                  }
                  modalc(modalcopy)
                  numberc(idx)
                }}
                >{title[idx]}</span>

                <span onClick={()=>{
                  let 러브카피 = [...러브];
                  러브카피[idx]++;
                  러브첸(러브카피);
                  }}
                > ❤ { 러브[idx] }
                </span>
              </h3>
              <p> 10월 7일 </p>
              <hr />
              { modal[idx] === true ? <Modal title={title} number={number} /> : null}
            </div>
          )
        })
      }    

</>
  )
}

function Modal(a) {
  return(
    <div className="modal">
      <h2>{a.title[a.number]}</h2>
      <p>날짜</p>
      <p>상세내용입니다.</p>
    </div>
  )
}

[codingapple]

<Modal title={title} number={idx} /> 이러면 될거같습니다 

number는 지금 누른 제목의 번호 하나만 저장해두는 state같군요 

[김우성]

와 정말 감사합니다. 강의 정말 잘 듣고있어요 ! 

[글쓴이]

글