Wie können die Daten in die Restaurantkartenkomponente eingebettet werden? ⇐ JavaScript

[Guest]

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

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;

Wie kann ich den Text in meine Restaurantkomponente einbinden? Bitte helfen Sie