리엑트 소스코드는

모달창이 작동안함...................
/*eslint-disable*/
import { useState } from 'react';
//import logo from './logo.svg';
import './App.css'

function App(){//컴포넌트 임
 
  let [글제목,글제목변경] = useState(['남자코트 추천','강서 우동맛집','자바 좋아요']);
  let [따봉,따봉변경] = useState(0);
  let [modal,setModal] =useState(false);
  
  //  [1,2,3].map(function(a){
  //    return '1233211'
  //  })
  //1.array자료갯수만큼 함수안의 코드실행해줌
  //2.함수의 파라미터는 array 안에 있던 자료임
  //3.return에 모 적으면 array로 담아준다
  
  return (
    <div className="App">
      <div className="black-nav">
        <h4>개발 blog</h4>
      </div>
      <div>
        <Modal 글제목={글제목}></Modal>
      </div>           
      
      {/* <button onClick={()=>{
    
        let copy = [...글제목];
        copy[0] = '여자코트 추천';
        글제목변경(copy);
    }}>글수정</button> */}
    
      {/* <div className="list">
        <h4>{글제목[0]} <span onClick={()=>{따봉변경(따봉+1)}}>^^</span>{따봉}</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>

      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div>

      <div className="list">
        <h4 onClick={()=>{ setModal(true) }}>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
        <hr/>
      </div> */}

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

{
    modal == true ? <modal/> : null
}

</div>
);
}

function Modal(props){
  return (
    <div className="modal" style={{ background : props.color }}>
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}
export default App;

app.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

.black-nav {
  background : black;
  width : 100%;
  display : flex;
  color : white;
  padding : 20px;
}
div {
  box-sizing : border-box
}
.show-modal{
  margin-top : 20px;
  padding : 20px;
  background : #eee;
  text-align : left;
}

클릭시 모달창은 안떠요