Как можно обернуть данные внутри компонента карты ресторана? ⇐ Javascript

[Anonymous]

В моем проекте клонирования ресторана детали ресторана не переносятся внутрь компонента. Мой проект также использует CSS Tailwind, можно ли просто использовать его для настройки данных внутри компонента? Если он использует реакцию, как можно их деформировать внутри компонента?
пример изображения

Код: Выделить всё

RestuarantCard.js

Код: Выделить всё

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;

Код: Выделить всё

Body.js

Код: Выделить всё

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;

Код: Выделить всё

RestuarantMenu.js

Код: Выделить всё

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;

Как можно обернуть текст внутри моего компонента ресторана? пожалуйста, помогите

Подробнее здесь: https://stackoverflow.com/questions/793 ... -component