Условный рендеринг кнопки закладки в React + Django Rest Framework

Здравствуйте? Я работаю над проектом электронной коммерции и хочу условно отобразить кнопку Bookmark, чтобы если пользователь сохраняет продукт, внутренний HTML кнопки Bookmark менялся с "Not Saved" на "Saved" во фронтенде (React). Бэкэнд (Django) работает, и закладки пользователя сохраняются в бэкэнде. В React я использовал следующий подход.

{product.bookmarks && product.bookmarks.find(bookmark => bookmark.id === user.id) ? 
<p>Saved</p> : <p>Not Saved</p>}

Таким образом, он сопоставляет ID закладки с ID зарегистрированного пользователя. Кнопка работает и если пользователь сохраняет товар, то во фронтенде возвращается "Saved", а если не сохраняет, то "Not Saved".

Хорошо ли использовать такой подход или есть лучший метод?

Я также попробовал этот подход в Django, и он возвращает данные, но я не уверен, как использовать эти данные в React для рендеринга кнопки.

@api_view(['POST'])
@permission_classes([permissions.IsAuthenticated])
def add_bookmarks(request, id, *args, **kwargs):
   saved = bool
   product = get_object_or_404(Product, id=id)
   if product.bookmarks.filter(id=request.user.id).exists():
    saved = False
    product.bookmarks.remove(request.user)
else:
    saved = True
    product.bookmarks.add(request.user)

data = {
    'saved': saved
}
print(data)
return Response(data, status=status.HTTP_200_OK)

Вернуться на верх