mini blog with React

/*eslint-disable*/ 
import {useState} from 'react';
import './App.css';

function App() {
  let [title, setTitle] = useState(["React", "Javascript", "SCSS"]);
  let [like, setLike] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);
  let [pushTitle, setPushTitle] = useState(0);
  
  // function changeTitle() {
  //   let subject = [... title];
  //   subject[0] = "여자 코트 추천";
  //   setTitle(subject);
  // }

  function likeUp(i) {
    let likeCount = [...like];
    likeCount[i]++;
    setLike(likeCount);
  }

  return (
    <div className="App">
      <div className="nav-container">
        <h2>개발 Blog</h2>
      </div>
      {
        title.map((a, i) => {
          return(
            <div className="title">
            <h2 onClick={() => {setPushTitle(i)}}>{a}<span onClick={() => {likeUp(i)}}>👍</span>{like[i]}</h2>
            <p>2월 18일 발행</p>
            <hr />
          </div>
          )
        })
      }
      <button onClick = {() => {setModal(!modal)}}>열고 닫기</button>
      {
        modal === true
        ? <Modal title={title} pushTitle={pushTitle}/>
        : null  
      }

    </div>
  );
}

function Modal(props) {
    return(
      <div className="modal">
        <h2>{props.title[props.pushTitle]}</h2>
        <p>날짜</p>
        <p>상세 내용</p>
      </div>
    )
}
export default App;