Как реализовать метод добавление в избранное?

Question

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

У меня есть метод, который находится в файле App.js:

const handleToggleBookMark = (id) => {
    setUsers(
      users.filter((user) => {
        if (user._id === id) {
          user.bookmark = !user.bookmark
          return user
        } 
        return user
      })
    )
  }

return (
    <div>
      <Users
        onToggleBookMark={handleToggleBookMark}
      />
    </div>
  )

А так же добавление в саму таблицу? в jsx файле:

<td>
    <BookMark status={bookmark} onClick={() => onToggleBookMark(_id)} />
</td>

И уже в другом компоненте мне нужна сама реализация.

const BookMark = ({ status, ...rest }) => {
  

}

export default BookMark

Кто подскажет как сделать? Иконки я взял с буцтрапа в html файл уже подключил.

Answer 1

Решение нашел с помощью знакомого. Реализация в файле bookmark.jsx

const BookMark = ({ status, onToggleBookMark, _id }) => {
  return (
    <i
      onClick={() => onToggleBookMark(_id)}
      class={status ? 'bi bi-star-fill' : 'bi bi-star'}
    ></i>
  )
}

А в файле user.jsx

<td>
    <BookMark
     status={bookmark}
     onToggleBookMark={onToggleBookMark}
     _id={_id}
    />
</td>

Было сложно описать проблему. Может кому пригодится.

БЛОГ НА HUSL

Как реализовать метод добавление в избранное?

Ответы (1 шт):