모달창이 작동안함...................
/*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;
}
