import logo from './logo.svg';
import './App.css';
import { useState } from 'react';
import { click } from '@testing-library/user-event/dist/click';
function App() {
let [a, b] = useState(['What is JSX?', 'How use variable in React?', 'How edit element with React?']);
let navLogo = 'React Blog';
let [e, f] = useState([0, 0, 0]);
let [modal, setModal] = useState(false);
let copy = [...a]
let pp = [...e]
return (
<div className="App">
<div className='black-nav'>
<p>{navLogo}</p>
<span onClick={function () { b(copy.sort()) }}>Ranking</span>
</div>
{/* <div className='content'>
<h4>{a[0]}</h4>
<div className='btn'>
<span onClick={function () { f(e + 1) }}>👍</span><p className='count'>{e}</p>
</div>
<p>2009,01,15</p>
</div>
<div className='content'>
<h4>{a[1]}</h4>
<div className='btn'>
</div>
<p>2009,01,15</p>
</div>
<div className='content'>
<h4 onClick={function () { setModal(!modal) }}>{a[2]}</h4>
<div className='btn'>
</div>
<p>2009,01,15</p>
</div> */}
{
a.map(function (a, b) {
console.log(pp)
return (
<div className='content' key={b}>
<h4 onClick={function () { setModal(!modal) }}>{a} <span onClick={function () { f(pp[b] + 1) }}>👍<p className='count'>{pp[b]}</p></span></h4>
<div className='btn'>
</div>
<p>2009,01,15</p>
</div>
)
})
}
{
modal == true ? <Modal></Modal> : null
}
</div>
);
}
function Modal() { //컴포넌트 만드는 문법임
return (
<div className='modaltab'>
<h5>Info</h5>
<p>30000</p>
</div>
)
}
export default App;
typeOf나 console.log로 출력해보니 e state가 NaN출력값과 Str이라고 출려되고 +1 을 실행시키면 0,0,01... 이렇게 문자열에 붙는것처럼 뒤에 붙는데 이유를 알고싶습니다.
