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

CodePudding user response：

There is somethign wrong with your JSON :D