props를 넣으면 콘솔에 App.js:71 Uncaught TypeError: Cannot read properties of undefined 가 나오고,
창이 뜨지를 않습니다.
확인을 해보면 <h4>{props.글제목[0]}</h4> 이 부분이 잘못되었다고 하는데, 인덱스를 넣는 [0] 이 부분이 문제인거 같습니다.
인덱스를 넣지 않으면 글제목에 내용이 다 구현되기는 하나, 창은 문제없이 작동합니다.
어떤게 해야될지 답변 부탁드립니다.
/*eslint-disable*/
import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
function App() {
let post = '강남 고기 맛집'
let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '파이썬 독학'])
let [따봉, 따봉변경] = useState([0,0,0]);
let [modal, setModal] = useState(false);
return (
<div className="App">
<div className='nav-black'>
<h4>React Blog</h4>
</div>
<div className='list'>
<h4>{글제목[0]} <span onClick={() => {따봉변경(따봉 + 1);}}>👍</span>{따봉}</h4>
<p> 2월 17일 발행</p>
<button onClick={() => {
let copy = [...글제목];
copy[0] = '여자 코트 추천'
글제목변경(copy)}}>변경</button>
</div>
<div className='list'>
<h4>{글제목[1]}</h4>
<p> 2월 17일 발행</p>
</div>
<div className='list'>
<h4 onClick={()=>{ setModal(!modal) }}>{글제목[2]}</h4>
<p> 2월 17일 발행</p>
</div>
{
modal == true ? <Modal 글제목={글제목}/> : null
}
<Modal/>
<button onClick={ () => {
let copyname = [...글제목];
copyname.sort();
글제목변경(copyname)
}} >가나다순 정렬</button>
{
글제목.map(function(a, i){
return (
<div className='list' key={i}>
<h4>{글제목[i]} <span onClick={()=>{
let copy = [...따봉];
copy[i]++;
따봉변경(copy)
}}>👍</span>{따봉}</h4>
<p> 2월 17일 발행</p>
</div>
)
})
}
</div>
);
}
function Modal(props) {
return (
<div className='modal'>
<h4>{props.글제목[0]}</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
