CODEWITHSUNDEEP
reactjs
ricemilk
ricemilk

Reputation: 85

Map function not mapping an array in React

I created a map function which should map through an array and display the items of an array, but for some reason, it doesn't work.

Here is the file with the array:

        const AboutContents = [
        {
            id: 1,
            image: "",
            title: "Feature 1",
            description: "Description goes here"        
        },
        {
            id: 2,
            image: "",
            title: "Feature2",
            description:"Description goes here"
        },
        {
            id: 3,
            image: "",
            title: "Feature 3",
            description: "Description goes here"
        }
    ];

export default AboutContents;

And here is the Entry file:

import React from "react";
import AboutContent from "./AboutContent"; //Probably unnecessary


function Entry(props) {
  return (
    <div>
      <img src={props.image} alt="" width="500" height="600"></img>
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </div>
  );
}

export default Entry;

And here is the About.jsx file. This is where the map function is at Note: I am alse using react-bootstrap, but I don't think that that would be the problem:

import React from "react";
import Entry from "./Entry";
import AboutContents from "./AboutContent";
import { Container, Row, Col } from "react-bootstrap";

function About(props) {
  return (
    <div>
      <h1 class="aboutText">About</h1>
    
    <Container fluid>
      <div class="row">
          {AboutContents.map(aboutItem => {
            return(
            <div class='col-lg-4 col-md-4'>
              <Entry
                key={AboutContents.id}
                image={AboutContents.image}
                title={AboutContents.title}
                description={AboutContents.description}
              />
            </div>
            )
          })}
      </div>
    </Container>
    </div>
  );
}

export default About;

Upvotes: 0

Views: 873

Answers (2)

Suson Waiba
Suson Waiba

Reputation: 156

Please check below example:-

const AboutContents = [
  {
    id: 1,
    image: "",
    title: "Feature 1",
    description: "Description goes here"
  },
  {
    id: 2,
    image: "",
    title: "Feature2",
    description: "Description goes here"
  },
  {
    id: 3,
    image: "",
    title: "Feature 3",
    description: "Description goes here"
  }
];

const Entry = (props) => {
  return (
    <div>
      <img src={props.image} alt="" width="500" height="600" />
      <h3>{props.title}</h3>
      <p>{props.description}</p>
    </div>
  );
}

const App = () => {
  return AboutContents.map((item, index) => (
    <Entry key={index} {...item}/>
  ));
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Upvotes: 0

Daniel Oram
Daniel Oram

Reputation: 8411

It appears you used tried using the AboutContents array itself instead of aboutItem inside your map function.

Try changing to this instead.

{AboutContents.map(aboutItem => {
    return(
    <div class='col-lg-4 col-md-4'>
        <Entry
        key={aboutItem.id}
        image={aboutItem.image}
        title={aboutItem.title}
        description={aboutItem.description}
        />
    </div>
    )
})}

Upvotes: 4

Related Questions