I am trying to render a react component by importing its content from a different JS file. In the main index.js file, I am invoking the card component and passing the imported content as props. And the props are used in the card component to display images and text in HTML elements. But somehow the image and text are not being displayed on the page. The image is not visible, only the alt text is visible.
This is the data.js file which has the content that I am importing into the main file.
CodePudding user response:
If your all import are current then . Try
{
data.map((item)=>(<Card image ={item.image} name={item.name} description={item.description}/>))
}
Let me know If you still stuck .
CodePudding user response:
That's because your data.js
file is exporting an array, but you are treating it like its a single object in your index.js
file.
If you are trying to list down a bunch of Card
s from your data then you'd have to iterate through them and return one for every one your data items:
<React.StrictMode>
<Header />
<Content />
{data.map(item => (
<Card
name={item.name}
description={item.description}
image={item.image}
/>
))}
</React.StrictMode />
P.S. You don't have to import data from "../data"
in your Card
file by the way.