I can’t seem to pass the image or image url using the props. I want to pass the props from an array to card.
import Card from "./Card"
function Specials() {
const specials = [
{
img: '../icons-assets/bruchetta.svg',
foodItem: 'Bruchetta' ,
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quis illo at expedita ipsam accusamus, amet libero sit labore quo.',
price: '$15'
},
{
img: '../icons_assets/greek salad.jpg',
foodItem: 'Greek Salad' ,
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quis illo at expedita ipsam accusamus, amet libero sit labore quo.',
price: '$17.8'
},
{
img: '../icons_assets/lemon dessert.jpg',
foodItem: 'Lemon Desert' ,
description: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quis illo at expedita ipsam accusamus, amet libero sit labore quo.',
price: '$18.9'
},
]
return (
<div className='specials'>
<div className="special-heading">
<h1>Specials</h1>
<button className='btn'>Online Menu</button>
</div>
<div className="card-container">
{specials.map((item,index) => {
return <Card key={index} image = {item.img} foodItem = {item.foodItem} description = {item.description} price = {item.price} />
}) }
</div>
</div>
)
}
export default Specials
I want to pass from here to card component
function Card(props) {
return (
<>
<div className="card-content">
<img src={props.image} alt='picture'/>
<div className="item-headings" >
<h3>{props.foodItem}</h3>
<h4>{props.price}</h4>
</div>
<p>{props.description}</p>
</div>
</>
)
}
export default Card
Everything except the image or path passes through the props. I have tried passing the elements themselves, the path, and the import but none seem to work. And both are in the same folder so path is the same for both.