React Map within a map

Question

I am having trouble to have a map within a map.

As you can see below I have commented several tries, ideally I wanted to use workItem.bullets.map((bulletItem, i)=><li key={i}>{bulletItem}</li>) directly.

If I use it directly I will have "Cannot read properties of undefined (reading 'map')".

On this version I will get a undefined is not iterable (cannot read property Symbol(Symbol.iterator)) even though console.log seems to work fine and shows the type as Array as expected. The Array.from is useless but I since I am not understanding what's happening I gave it a try.

 const work = this.props.data.work.map( workItem => {
      console.log(workItem.bullets);

      //let bulletPts = workItem.bullets.map((bulletItem, i)=><li key={i}>{bulletItem}</li>);
      //let bps = workItem.bullets.map((bulletItem, i)=>"toto");
      let array = Array.from(workItem.bullets);
      return (
        <div key={workItem.company}>
          <h3>{workItem.company}</h3>
          <p className="info">
            {workItem.title}
            <span>&bull;</span> <em className="date">{workItem.years}</em>
          </p>
          <p>{workItem.description}</p>
          <ul>
            {
              array.map(bulletItem => "test")
            }
          </ul>
        </div>
      );
    });

I also took a look at How to map inside a map function in reactjs as it looked like a similar problem but I was not able to apply it to my issue.

I don't think it is needed but If you want to see the full project I am trying to add bullet points for resume, resumeData.json needs to be modified to contain some bulletPoints. https://github.com/nordicgiant2/react-nice-resume

SoGoddamnUgly · Accepted Answer · 2021-11-19T01:18:44.810

1

There is somethign wrong with your JSON :D

edited Nov 19 '21 at 01:18

answered Nov 19 '21 at 00:30

SoGoddamnUgly

706
4
9

Thank you for your answer. I just logged it and it says [[Prototype]]: Array(0) and logs each work item with it's fields – Abanslash Nov 19 '21 at 00:36
I updated my answer. This should work. – SoGoddamnUgly Nov 19 '21 at 00:43
Using
gives the Cannot read properties of undefined(reading 'map') error. The error will appear at the line of the variable bulletPts
– Abanslash Nov 19 '21 at 00:44
Please post the json in the question or at least part of it if its really big. – SoGoddamnUgly Nov 19 '21 at 00:57
let bulletPts = Array.from(workItem.bullets).map((bulletItem, i)=>
{bulletItem}

Abanslash

Nov 19 '21 at 01:06

nvm one of my item didn't have bullet points :-), let me mark your answer as good then – Abanslash Nov 19 '21 at 01:16

React Map within a map

1 Answers1