I've been working on a Recipe app that leverages data from the edamame API. I successfully imported Material UI cards into my .js file to pull data from the API and stored it in a const named recipes. However, I'm facing difficulties in getting the data to display within the imported cards. Oddly enough, when I create local cards without Material UI, the API data displays perfectly. But as soon as Material UI is involved, issues arise. How should I go about solving this?
MealPlan.Js (API call and data storage)
import React, { useState, useEffect } from "react";
import style from "./recipe.module.css";
import "./App.css";
import NavigationBar from "./NavigationBar";
import Card from "./card";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
gridContainer: {
paddingLeft: "20px",
paddingRight: "20px",
},
});
export default function MealPlan() {
// defining the useStates
const [recipes, setRecipes] = useState([]);
const [search, setSearch] = useState("");
const [query, setQuery] = useState("chicken");
const APP_ID = "removed";
const APP_KEY = "removed";
useEffect(() => {
getRecipes();
}, [query]);
const getRecipes = async () => {
const response = await fetch(
`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`
);
const data = await response.json();
setRecipes(data.hits);
console.log(data.hits);
};
const MealPlanCard = ({ title, calories, image, ingredients }) => {
const round = Math.round(calories);
return (
<div className={style.recipe}>
<h1>{title}</h1>
<img className={style.image} src={image} alt="" />
</div>
);
};
return (
{recipes.slice(0, 1).map((recipe) => (
<MealPlanCard
key={recipe.recipe.label}
title={recipe.recipe.label}
calories={recipe.recipe.calories}
image={recipe.recipe.image}
ingredients={recipe.recipe.ingredients}
/>
))}
</div>
<Grid container spacing={4} className={classes.gridContainer}>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
</Grid>
</div>
);
}
Here's the JSX code for the imported Material UI cards:
import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles({
root: {
minWidth: 200,
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)",
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
});
export default function SimpleCard() {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<Card className={classes.root}>
<CardContent></CardContent>
<CardActions>
<Button size="small">Button</Button>
</CardActions>
</Card>
);
}
Check out how my page looks currently here.
The goal is to populate the imported Material UI cards at the bottom with the content of my personal card at the top. Any suggestions on accomplishing this?