Render a react component by importing the content from a JS file

Question

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 index.js file where I am importing the data from the data.js file and invoking the card component in the render method.

This is the card.js file where I am accepting props passed from the index.js file and using them to render the elements.

This is the data.js file which has the content that I am importing into the main file.

Answer 1

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.

Answer 2

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 />

PS You don't have to import data from "../data" in your Card file by the way.