좋아요 버튼 만들기.

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

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 월 전에 수정됐습니다. 이유: 추가 사항

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