코드를 구현하였는데 좋아요가 000개로 늘어나있고, 각각 좋아요 버튼을 눌렀을 때 1의 자리, 10의 자리, 100의 자리 순으로 올라갑니다.
코드 답변 부탁드립니다 ㅠ
/*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() {
return (
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
export default App;
