Блог

В настоящее время я создаю проект над базой данных, которую я создал, используя макет API. Я создал кнопку, создал функцию addToFavorites. Когда была нажата кнопка, я хотел, чтобы информация о выбранном продукте попала в избранное, но я не смог. Я был бы рад, если бы вы могли помочь мне в том, как это сделать.

(Favorites.js теперь пусто. Я разозлился и удалил все коды, потому что не мог.)

(

Recipes.js

 import React, { useState, useEffect } from "react"
import axios from "axios"
import "./_recipe.scss"
import Card from "../Card"

function Recipes() {
  const [recipes, setRecipes] = useState([])
  const [favorites, setFavorites] = useState([])

  useEffect(() => {
    axios
      .get("https://5fccb170603c0c0016487102.mockapi.io/api/recipes")
      .then((res) => {
        setRecipes(res.data)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])

  const addToFavorites = (recipes) => {
    setFavorites([...favorites, recipes])
    console.log("its work?")
  }

  return (
    <div className="recipe">
      <Card recipes={recipes} addToFavorites={addToFavorites} />
    </div>
  )
}

export default Recipes

 

Card.js

 import React, { useState } from "react"
import { Link } from "react-router-dom"
import { BsClock, BsBook, BsPerson } from "react-icons/bs"

function Card({ recipes, addToFavorites }) {
  const [searchTerm, setSearchTerm] = useState("")

  return (
    <>
      <div className="recipe__search">
        <input
          type="text"
          onChange={(event) => {
            setSearchTerm(event.target.value)
          }}
        />
      </div>
      <div className="recipe__list">
        {recipes
          .filter((recipes) => {
            if (searchTerm === "") {
              return recipes
            } else if (
              recipes.title.toLowerCase().includes(searchTerm.toLowerCase())
            ) {
              return recipes
            }
          })
          .map((recipe) => {
            return (
              <div key={recipe.id} className="recipe__card">
                <img src={recipe.image} alt="foods" width={350} height={230} />
                <h1 className="recipe__card__title">{recipe.title}</h1>
                <h3 className="recipe__card__info">
                  <p className="recipe__card__info--icon">
                    <BsClock /> {recipe.time} <BsBook />{" "}
                    {recipe.ingredientsCount} <BsPerson />
                    {recipe.servings}
                  </p>
                </h3>
                <h3 className="recipe__card__desc">
                  {recipe.description.length < 100
                    ? `${recipe.description}`
                    : `${recipe.description.substring(0, 120)}...`}
                </h3>
                <button type="button" className="recipe__card__cta">
                  <Link
                    to={{
                      pathname: `/recipes/${recipe.id}`,
                      state: { recipe }
                    }}
                  >
                    View Recipes
                  </Link>
                </button>
                <button onClick={() => addToFavorites(recipes)}>
                  Add to favorites
                </button>
              </div>
            )
          })}
      </div>
    </>
  )
}

export default Card

 

Конечный результат:

Я реализовал addToFavorite() removeFavorite() функциональность and, вы можете использовать ее так, как хотите.

Мне нужно внести некоторые изменения в код, чтобы продемонстрировать его работоспособность, но базовая функциональность addToFavorite() and removeFavotie() работает именно так, как должна:

Вот Card.js где реализованы обе эти функции:

 import React, { useState } from "react";
import { BsClock, BsBook, BsPerson } from "react-icons/bs";

function Card({ recipes }) {
  const [searchTerm, setSearchTerm] = useState("");
  const [favorite, setFavorite] = useState([]); // <= this state holds the id's of all favorite reciepies

// following function handles the operation of adding fav recipes's id's

  const addToFavorite = id => {
    if (!favorite.includes(id)) setFavorite(favorite.concat(id));
    console.log(id);
  };

// this one does the exact opposite, it removes the favorite recipe id's
  const removeFavorite = id => {
    let index = favorite.indexOf(id);
    console.log(index);
    let temp = [...favorite.slice(0, index), ...favorite.slice(index   1)];
    setFavorite(temp);
  };

// this variable holds the list of favorite recipes, we will use it to render all the fav ecipes
  let findfavorite = recipes.filter(recipe => favorite.includes(recipe.id));

// filtered list of recipes
  let filtered = recipes.filter(recipe => {
    if (searchTerm === "") {
      return recipe;
    } else if (recipe.title.toLowerCase().includes(searchTerm.toLowerCase())) {
      return recipe;
    }
  });

  return (
    <div className="main">
      <div className="recipe__search">
        <input
          type="text"
          onChange={event => {
            setSearchTerm(event.target.value);
          }}
        />
      </div>
      <div className="recipe-container">
        <div className="recipe__list">
          <h2>all recipes</h2>
          {filtered.map(recipe => {
            return (
              <div key={recipe.id} className="recipe__card">
                <img src={recipe.image} alt="foods" width={50} height={50} />
                <h2 className="recipe__card__title">{recipe.title}</h2>
                <h4 className="recipe__card__info">
                  <p>
                    <BsClock /> {recipe.time} <BsBook />{" "}
                    {recipe.ingredientsCount} <BsPerson />
                    {recipe.servings}
                  </p>
                </h4>
                <h4 className="recipe__card__desc">
                  {recipe.description.length < 100
                    ? `${recipe.description}`
                    : `${recipe.description.substring(0, 120)}...`}
                </h4>
                <button onClick={() => addToFavorite(recipe.id)}>
                  add to favorite
                </button>
              </div>
            );
          })}
        </div>

        <div className="favorite__list">
          <h2>favorite recipes</h2>
          {findfavorite.map(recipe => {
            return (
              <div key={recipe.id} className="recipe__card">
                <img src={recipe.image} alt="foods" width={50} height={50} />
                <h2 className="recipe__card__title">{recipe.title}</h2>
                <h4 className="recipe__card__info">
                  <p className="recipe__card__info--icon">
                    <BsClock /> {recipe.time} <BsBook />{" "}
                    {recipe.ingredientsCount} <BsPerson />
                    {recipe.servings}
                  </p>
                </h4>
                <h4 className="recipe__card__desc">
                  {recipe.description.length < 100
                    ? `${recipe.description}`
                    : `${recipe.description.substring(0, 120)}...`}
                </h4>
                <button onClick={() => removeFavorite(recipe.id)}>
                  remove favorite
                </button>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default Card;
 

Вот живое рабочее приложение: stackblitz

Вы можете получить предыдущие избранные рецепты и добавить новые.

 const addToFavorites = (recipes) => {
    setFavorites(prevFavourites => [...prevFavourites, recipes])
    console.log("its work?")
  }