Как получить id элемента?

Question

[SeventimeSsS]

Есть карточки товаров которые появляются через цикл, но проблема в том что когда добавляешь в избранное одну карточку сразу добавляются все. Я примерно понимаю что нужно чтобы стейт сравнивался с индексом, но как правильно указать индекс? (=== index этого нет в коде, но мне кажется примерно так и должно работать)

{Array.isArray(visibleData) ? visibleData.map((chanel, index) => {
                        return (
                            <div href={chanel.url} className="chanel__item" key={index}>
                                <img src={star} alt="star" onClick={addFavoriteChanel} id={index} className={`star ${favorite <b>=== index</b>  ? 'active' : ''}`} />
                                <img src={chanel.image} alt="" className="chanel__img" />
                                <div className="chanel__title"><div className="chanel__item-number">{chanel.number}. &nbsp;</div {chanel.name_ru}</div>
                            </div> 
                        ) 
                    }) : null}

const [favorite, setFavorite] = useState('');
 
 const addFavoriteChanel = (e) => {
        const star = e.target.id
        console.log(favorite)
        if(favorite === star) { 
            setFavorite('');
        } else {
            setFavorite(star)
       }
    }

Comments

[historydev]

Слишком обобщённо, где код кнопки? С каким состоянием сравнивать? Что хранит состояние, id добавленного элемента? Что лежит в visibleData?

[SeventimeSsS]

Владимир, добавил state и и сам код который отвечает за его изменения, в роли самой кнопки выступает img src={star} ... . Сам вопрос больше в том как мне сравнить состояние "favorite" с index

[ThunderCat]

onClick=

Серьезно? На календарь гляньте, вы проспали 15 лет...

Answer 1

[historydev]

<img src={star} alt="star" onClick={() => addFavoriteChanel(index)} id={index} className={`star ${favorite <b>=== index</b>  ? 'active' : ''}`} />

const [favorite, setFavorite] = useState(0);

const addFavoriteChanel = (index) => {
        if(favorite === index) { 
            setFavorite(0);
        } else {
            setFavorite(index)
       }
    }

Comments

[SeventimeSsS]

Спасибо, это работает, но сейчас в избранное добавляется только 1 элемент, при попытке добавить в избранное еще один элемент, со старого пропадает избранное

[historydev]

SeventimeSsS, а этим уже займитесь сами) Подсказка:

const [favorite, setFavorite] = useState([]);
setFavorite(prev => [index,...prev])