React map inside a map, multi array in an object

Question

I have a map function inside a map function in react for this object

let timelineElements=[{
    id: 2,
    title: "Backend Developer",
    location: "Skystead, Craonia",
    description: [
      "Recommend changes for reporting to enhance the overall monitoring of system, vulnerabilities and practices",

      "Built data pipeline that allowed automated and efficient way of reporting using Powershell scripting, Excel , SQL and Power BI that",
    ],
    buttonText: "View Backend Projects",
    date: "June 2013 - August 2016",
    icon: "work",
  },
  {
    id: 3,
    title: "Quality Assurance Engineer",
    location: "South Warren, Geshington",

    description: [
      "Recommend changes for reporting to enhance the overall monitoring of system, vulnerabilities and practices",

      "Built data pipeline that allowed automated and efficient way of reporting using Powershell scripting, Excel , SQL and Power BI that",
    ],
    date: "September 2011 - June 2013",
    icon: "work",
  }]

and I already have this set up

 {timelineElements.map((element) => {
     return (
    <p key={element.key}>
    {element.title}
    </p>
    {element.description && element.description.map((desc) => {return (<p key={desc}>{desc}</p>);
})}

)}

I added the ** ** in the description item so that you could see where I am trying to access the data. but in the application there is no ** ** in the description.

I think that the logic holds and that it should work but when I run this I get this error

Any help would be much appreciated!!

Error is saying that you've some element.description that isn't an array or isn't an object with a map function property to invoke. You're mapping also doesn't appear to be valid JSX, is this a complete example? There seems to be something missing? Is anything updating the timelineElements value? — Drew Reese
– Drew Reese, Commented May 27, 2021 at 6:32
this is not the full code but rather the logic of how it is being implemented. I had to shorten it because my code is about 100 lines and I didn't want you to read all that code. There is nothing updating the timelineElements value. Hope that answered your question — lipo
– lipo, Commented May 27, 2021 at 6:43
Ok, seems we need a bit more context. From what you've shared there isn't anything that could throw the error, so I'm assuming there's more to the story in the code you omitted. It doesn't need to be your entire code (100 lines isn't a lot, BTW), but we should see where timelineElements is declared, all logic that updates it (for any reason), all the way to where you are trying to render it. Somewhere along the line it appears description becomes not an array or mappable object. — Drew Reese
– Drew Reese, Commented May 27, 2021 at 6:46

Shyam · Accepted Answer · 2021-05-27 06:39:06Z

1

If you are not sure whether the description will always be [] that sometimes you might get null as well . Then you can use optional chaining

{element?.description && element.description.map((desc) => {return (<p key={desc}>{desc}</p>);

edited May 27, 2021 at 6:39

answered May 27, 2021 at 6:35

Shyam

5,5071 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Drew Reese Over a year ago

Array.prototype.map can handle empty arrays without issue, provided what you are trying to map is actually an array. You would only need to check the length if you wanted to conditionally render some other UI if there was nothing to map.

Shyam Over a year ago

yeah but the error says .map is not a function . But what you said is correct my first answer is not needed . But the optional chaining part might help .

Drew Reese Over a year ago

The Optional Chaining really only helps if the object you are referencing into is possibly null or undefined, it can still fail with the OP's error if it is defined but not an array or object with map property to call as a function, i.e. like if description is a string, or number, etc.

Shyam Over a year ago

yeah got it, thats why i have mentioned if it is null in the answer . But i doubt this might be because of the way he is setting the initial state .

Dharman · Accepted Answer · 2021-05-27 06:50:02Z

1

{(element?.description || []).map((desc) => {return (<p key={desc}>{desc}</p>);

edited May 27, 2021 at 6:50

Dharman♦

33.9k27 gold badges103 silver badges157 bronze badges

answered May 27, 2021 at 6:44

Anh Tuan

1,1436 silver badges13 bronze badges

Collectives™ on Stack Overflow

React map inside a map, multi array in an object

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related