How to map a 2d array in React Js

Question

Projects.js

 constructor() {
  super();
  this.state = {
     projects: [] 
  }
}

componentWillMount() {
  this.setState({
     projects: [
        {
           link: '/',
           img: 'img.jpg',
           title: 'Title',
           date: 'Jul 2017',
           description: 'Description',
           icons: 
           [
              {
                 src: 'icon.svg',
                 content: 'Content'
              },
              {
                 src: 'icon2.svg',
                 content: 'Content 2'
           ]
        }
     ]
   });
  }

render() {
   return (
      <section className="projects">
         <ProjectsList projects={this.state.projects} />
      </section>
   );
  }
}

ProjectsList.js

let projectItems;

projectItems = this.props.projects.map(project => {
  return (
    <ProjectItem key={project.title} project={project}  />
  ) 
});

return (
   <div id="projectsList">
     {projectItems}
   </div>
)

I want to create a project card that has a list of icons on the bottom. I can map the projects array but the icons won't work. Anyone know how to map this 2d array in ReactJs? Thanks!

Answer 1

Simply use map again:

projectItems = this.props.projects.map(project => {
  return (
    <div>
      <ProjectItem key={project.title} project={project}  />
      { 
        project.icons.map(i => <img key={i.src} src={i.src} alt="" />) 
      }
    </div>
  ) 
});

You can do it of course inside ProjectItem

Answer 2

array = [[null,null,null],[null,null,null]]

return (
<div> {array.map(x=> x.map(y=> <div>{....}</div> ))}</div>
)

mapping it again inside the array will give the value