Как сделать стейт лайка?

Question

[lucidiusss]

Всем добрый вечер, новичок в JS, хочу сделать так чтобы при нажатии на иконку сердечка, у меня стейт становился активным и уже в зависимости от стейта рендерилась нужная иконка. Проблема в том, что когда нажимаешь на иконку на одном айтеме, она меняется на всех. Подскажите, как лучше решить проблему и реализовать задумку?

import './paginate.scss'
import { useState, useEffect } from 'react'
import ReactPaginate from 'react-paginate';
import axios from 'axios'
import hot from '../../../../assets/hot.svg'
import liked from '../../../../assets/liked.svg'
import notliked from '../../../../assets/notliked.svg'

function Items({ currentItems }) {

  const [like, setLike] = useState(false);

    const handleLike = () => {
        setLike(!like);
    }

  return (
    <div className='items'>
      {currentItems &&
        currentItems.map((item, index) => (
          <div key={index} className='item'>
            <div className='item__img'>
              <img className='nftImg' src={item.nftImg} alt="" />
              <p onClick={handleLike} className='like__btn'>
                  {
                    like 
                    ? <img src={liked} alt="" />
                    : <img src={notliked} alt="" />
                  }
              </p>
            </div>
            <div className='item__title'>
              <h1>{item.title}</h1>
              <p>Current Bid</p>
            </div>
            <div className="item__bidder">
              <img src={item.bidderAvatar} alt="" />
              <p>{item.currentBidder}</p>
              <span>{item.currentBid}</span>
            </div>
            <div className="expires__in">
              <img src={hot} alt="" />
              <span>{item.expiresIn}</span>
              <button className='bid__btn'>Bid</button>
            </div>
          </div>
        ))}
    </div>
  );
}

function Paginate({ itemsPerPage, items }) {

  const [currentItems, setCurrentItems] = useState([]);
  const [pageCount, setPageCount] = useState(0);

  const [itemOffset, setItemOffset] = useState(0);


  useEffect(() => {
    const endOffset = itemOffset + itemsPerPage;
    setCurrentItems(items.slice(itemOffset, endOffset));
    setPageCount(Math.ceil(items.length / itemsPerPage));
  }, [itemOffset, itemsPerPage, items]);

  const handlePageClick = (event) => {
    const newOffset = (event.selected * itemsPerPage) % items.length;
    setItemOffset(newOffset);
  };


  return (
    <>
      <Items currentItems={currentItems} />
      <ReactPaginate
        nextLabel=">"
        onPageChange={handlePageClick}
        pageRangeDisplayed={3}
        marginPagesDisplayed={2}
        pageCount={pageCount}
        previousLabel="<"
        pageClassName="page-item"
        pageLinkClassName="page-link"
        previousClassName="page-item"
        previousLinkClassName="page-link"
        nextClassName="page-item"
        nextLinkClassName="page-link"
        breakLabel="..."
        breakClassName="page-item"
        breakLinkClassName="page-link"
        containerClassName="pagination"
        activeClassName="active"
        renderOnZeroPageCount={null}
      />
    </>
  )
}

export default Paginate

Answer 1

[Артем]

Во первых, тебе нужен Стейт не булевный, а массив.
При клике на лайк заноси или убирай из массива индекс айтема.
Во вторых, при итерации массива айтемов проверяй есть ли в стейте нужный индекс. Это и будет условие для смены картинки.
В третьих, при условии не обязательно менять элемент, достаточно изменять путь к картинке.