좋아요 버튼 만들기.

[베니]

안녕하세요~!

좋아요 버튼 숙제를 하는 중에 증가만 되는게 아닌 false 일 때는 + 1 아닐때는 - 1 이 되게 만들고 싶은데
let [like, setLike] = useState([0, 3, 5]);
let [chkLike, setChkLike] = useState([false, false, false]);

function changeLike(idx){

    let isLikeChk = [...chkLike][idx];
    let isLikeFalse = isLikeChk == false;

    let isLiked = [...like][idx];
    
    console.log(isLiked );
   // 확인 시 첫번째 게시물 0 / 두번째 : 3 / 세번째 : 5 순서에 맞게 잘 나오는데
   setLike(isLikeFalse ? isLiked  + 1 : isLiked - 1);
   setChkLike(!isLikeFalse);
  // 이런식으로 만들어서 버튼 클릭 시  chkLike is not iterable 라고 뜹니다.. 왜그러는 걸까요..?
}
예제.map( (item, idx) => {
    <button type="button" onclick={ ()=> { changeLike(idx) } }>
});

[codingapple]

state변경함수들에 array넣어야할거같은데 숫자나 false 하나만 집어넣고있군요

[베니]

안녕하세요.. 그동안 강의를 듣지 못하다가
다시 듣기 시작했습니다.

const [useTitle, setTitle] = useState(["산본 국수 맛집", "안산 곱창 맛집", "서울 고기 맛집"]);
const [useLike, setLike] = useState(new Array(useTitle.length).fill(0));
    useEffect ( () => {
        const likeBtn = document.querySelectorAll('.btn.like');
        let newLike = [...useLike];
        likeBtn.forEach( (item, idx) => {
             item.onclick = () => {
                newLike[idx] = newLike[idx] + 1;
                //console.log(newLike[idx]);
                setLike(newLike[idx]);
             };
        });
        
    }, []);

html 마크업

{
                            useTitle.map( (item, idx) => {
                                return(
                                    <li key={idx}>
                                        <div className="text-wrap">
                                            <h3 className="title">
                                                {item} {idx}
                                            </h3>
                                            <button className='btn like'> 좋아용 {[idx]} </button>
                                            <span className='like-up'> { useLike[idx]} </span>
                                        </div>
                                   

                                );                             })                         }

이였을 때
클릭 시 .like-up {useLike[idx]} 이 빈값으로 변경 되는 문제가 있어서요!

콘솔로 찍을 때는 잘 올라는게 보입니다!!

function LikeUp(idx){
        let newLike = [...useLike];
        newLike[idx] += 1;
        setLike(newLike);   
  }
추가로 함수로 만들어 onClick={ () => { Likeup(idx) } } 을 했을 때는 너무 잘됩니당..

• 이 답변은 베니에 의해 1 년, 1 월 전에 수정됐습니다. 이유: 추가 사항

[codingapple]

setLike()에는 array집어넣어야하는데 숫자하나 넣고있는듯요 
리액트쓰면 이벤트리스너는 굳이 필요없습니다

[베니]

그렇군요...ㅠㅜ 감사합니다!!!

[글쓴이]

글