[React1] 모달창마다 다른 제목뜨게하기

let [title] = useState(0);

title이 0이면 글제목[0]

title이 1이면 글제목[1]

title이 2이면 글제목[2]

 

{props.글제목[title]}

이렇게 되면 된다!!!

 

근데 title에 적혀있는 수로만 움직인다. 그래서 title도 움직이게 해야한다.

 

let [title, setTitle] = useState(0);

 

글제목을 클릭하면 setTitle로 바뀌게 되야한다.

알기쉽게 버튼을 만들어서 먼저 생각해보자.

 

<button onClick={()=>{setTitle(0)}}>글제목0</button>
<button onClick={()=>{setTitle(1)}}>글제목1</button>
<button onClick={()=>{setTitle(2)}}>글제목2</button>

그래서 setTitle(i)로 하면 된다.

 

<최종본>

import { useState } from "react";
import "./App.css";

function App() {
  let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "파이썬독학",
  ]);
  let [따봉, 따봉변경] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);
  let [title, setTitle] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4 style={{ color: "skyblue", fontSize: "25px", fontWeight: 500 }}>
          ReactBlog
        </h4>
      </div>

      {글제목.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(!modal);
                setTitle(i);
              }}
            >
              {글제목[i]}
              <span
                onClick={() => {
                  let copy = [...따봉];
                  copy[i] = copy[i] + 1;
                  따봉변경(copy);
                }}
              >
                👍
              </span>
              {따봉[i]}
            </h4>
            <p>2월 17일 발행</p>
          </div>
        );
      })}

      {modal === true ? (
        <Modal title={title} 글제목변경={글제목변경} 글제목={글제목} />
      ) : null}
    </div>
  );
}

function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.글제목[props.title]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button>글수정</button>
    </div>
  );
}

export default App;