좋아요 카운드 .map 사용시,

[박땡땡]

function App() {
let [postTitle, postTitleChange] = useState(['깃허브', '리액트 독학', '개발일지']);
let [thumb, thumbCountMachine] = useState([0,0,0]);
let [modal, setModal] = useState(false);
 
const toggleModal = () => {
setModal(modal => !modal);
}
const setThumb = () => {
let copyThumb = [...thumb];
copyThumb[i]+=1;
thumbCountMachine(copyThumb);
}

return (
<div className="App">
<div className="black-nav">
<h4 style={{padding: '20px'}}>Blog</h4>
</div>
<button onClick={() => {
let copyPostTitle = [...postTitle];
copyPostTitle[0] = '여자 코트 추천';
postTitleChange(copyPostTitle);
 }}>글수정
</button>
{/* <div className="list">
 <h4>{postTitle[0]} <span className="thumb" onClick={ () => {thumbCountMachine(thumb+=1)}}>👍</span> {thumb}</h4>
 <p>02, August, 2022</p>
 </div>
 <div className="list">
 <h4 onClick= {toggleModal}>{postTitle[1]}</h4>
 <p>02, August, 2022</p>
 </div>
 <div className="list">
 <h4>{postTitle[2]}</h4>
 <p>02, August, 2022</p>
 </div> */}
{
postTitle.map(function(para, i){
return (
<div className="list" key={i}>
<h4 onClick= {toggleModal}>{ postTitle[i] } <span className="thumb" onClick={setThumb}>👍</span> {thumb[i]}</h4>
<p>02, August, 2022</p>
</div>
 )
 })
}

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

 
</div>
 );
}

function Modal() {
return(
<div className="modal">
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
 )
}
export default App;

선생님 저는 저렇게 함수를 변수로 뺐더니 카운트가 되지 않는데 이런 경우에는 i의 인자를 어떻게 받아야 할까요?

그리고 <h4> 태그에 토글모달 함수가 있으면 카운트 되지 않는데 어떻게 해야할까요 ㅠ

[codingapple]

함수만들 때 
function setThumb(i){  해놓고
함수쓸 때 setThumb(1) 입력하면 됩니다 

[박땡땡]

const setThumb = (i) => {
let copyThumb = [...thumb];
copyThumb[i]+=1;
thumbCountMachine(copyThumb);
}

{
postTitle.map(function(para, i){
return (
<div className="list" key={i}>
<h4 onClick= {toggleModal}>{ postTitle[i] } <span className="thumb" onClick={setThumb(1)}>👍</span> {thumb[i]}</h4>
<p>02, August, 2022</p>
</div>
 )
 })
}


안되는데요 ㅠㅠ...
{
postTitle.map(function(para, i){
return (
<div className="list" key={i}>
<h4 onClick= {toggleModal}>{ postTitle[i] } <span className="thumb" onClick={setThumb(i)}>👍</span> {thumb[i]}</h4>
<p>02, August, 2022</p>
</div>
 )
 })
}

onClick={setThumb(i)} 로 바꿔도 안되네요 ㅠㅠ..
너무 많이 re-render 했다고 뜨면서 에러가 나서요ㅠㅠㅠ..

[codingapple]

onClick={()=>{ 여기안에 코드짭시다 }}

[글쓴이]

글