Wie können die Daten in die Restaurantkartenkomponente eingebettet werden?
Posted: 07 Jan 2025, 11:17
In meinem Restaurant-Klonprojekt werden Restaurantartikeldetails nicht in die Komponente eingeschlossen. Mein Projekt verwendet auch Tailwind-CSS. Ist es möglich, es nur zum Anpassen der Daten innerhalb der Komponente zu verwenden? Wie können diese verzerrt werden, wenn React verwendet wird? innerhalb der Komponente?
Beispielbild
Wie kann ich den Text in meine Restaurantkomponente einbinden? Bitte helfen Sie
Beispielbild
Code: Select all
RestuarantCard.js
Code: Select all
import { CDN_URL } from "../utils/constants";
const styleCard = {
backgroundColor: "#f0f0f0"
};
const RestuarantCard =(props) =>{
const {resData} = props;
const {cloudinaryImageId,name,cuisines,avgRating,costForTwo} = resData?.info;
return(
{name}
[h4]{cuisines.join(",")}[/h4]
[h4] {avgRating}[/h4]
[h4] {costForTwo}[/h4]
)
}
export const withPromotedLabel = (RestuarantCard) => {
return (props) => {
return (
Promoted
)
}
}
export default RestuarantCard;
Code: Select all
Body.js
Code: Select all
import RestuarantCard, {withPromotedLabel} from "./RestuarantCard";
import { useEffect, useState } from "react";
import Shimmer from "./Shimmer";
import { Link } from "react-router-dom";
const Body = () =>{
const [listOfRestaurants, setListOfRestraunt] = useState([]);
// as soon as we call setListOfRestaurant the react will call the diff and update the UI
const [filteredRestuarant, setfilteredRestuarant] = useState([]);
const [searchText, setsearchText] = useState("");
const RestaurantCardPromoted = withPromotedLabel(RestuarantCard);
useEffect(() => { //react Hook
fetchData();
}, []);
const fetchData = async () =>
{
const data = await fetch(
"https://thingproxy.freeboard.io/fetch/https://www.swiggy.com/dapi/restaurants/list/v5?lat=12.9352403&lng=77.624532&is-seo-homepage-enabled=true&page_type=DESKTOP_WEB_LISTING"
);
const json = await data.json();
console.log(json);
/*const restaurants = json?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants || [];
setListOfRestraunt(restaurants); // Keep the full list here
setfilteredRestuarant(restaurants); */
setListOfRestraunt(json?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
setfilteredRestuarant(json?.data?.cards[1]?.card?.card?.gridElements?.infoWithStyle?.restaurants);
};
//conditional Rendering
if(listOfRestaurants.length === 0){
return ;
}
return(
{setsearchText(e.target.value);}}/>
{
console.log(searchText);
const filteredRestuarant = listOfRestaurants.filter((res) => res.info.name.toLowerCase().includes(searchText.toLowerCase()));
setfilteredRestuarant(filteredRestuarant);
}}>Search
{
const filteredList = listOfRestaurants.filter
((res) => res.info.avgRating > 4.3);
setListOfRestraunt(filteredList);
}} >Top Rated Restuarant
{ filteredRestuarant.map(restaurant => (
[*]{
restaurant.info.promoted ? () : ()
}
))//We have looped using map function, also each of item should have unique key(property)
//The resList is an array of objects, where each object contains a key info, and inside info, there is another key id. Therefore, to access the id field, you need to drill into the info object within each resList item
}
)
}
export default Body;
Code: Select all
RestuarantMenu.js
Code: Select all
import useRestaurantMenu from "../utils/useRestaurantMenu";
import Shimmer from "./Shimmer";
import { useParams } from "react-router-dom";
const RestaurantMenu = () => {
const { resid } = useParams();
const resInfo = useRestaurantMenu(resid);
if ( resInfo === null) return ;
const { name, cuisines, costForTwoMessage } = resInfo?.cards[2]?.card?.card?.info;
const { itemCards } = resInfo?.cards[4]?.groupedCard?.cardGroupMap?.REGULAR?.cards[2]?.card?.card;
console.log(itemCards);
return (
{name}
{cuisines?.join(", ")} - {costForTwoMessage}
Menu
[list]
{itemCards?.map((item) => ({item?.card?.info?.name} : {item?.card?.info?.price} //map function, dynamically fetch
))}
[/list]
);
};
export default RestaurantMenu;