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!

Tomasz Mularczyk · Accepted Answer · 2018-05-06 16:38:11Z

3

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

answered May 6, 2018 at 16:38

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

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

2 Comments

gabes graphic Over a year ago

Thanks for the quick answer. I've putted your code there inside ProjectItem but it says that projectItems is undefined. Sry to bother you, i'm a complete Noob in react.

Student22 Over a year ago

This answer really helped me with the 5 day / 3 hour forecast data using the Open Weather API! Thank you so much!

Om Fuke · Accepted Answer · 2021-02-28 11:25:07Z

1

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

answered Feb 28, 2021 at 11:25

Om Fuke

6721 gold badge10 silver badges14 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2018-05-06 18:02:50Z

0

In your ProjectItem component you need to map over the Icons. Your ProjectItem component will look like

const ProjectItem = ({project}) => {
    return (
        <div className={'card'}>
            {/*content for link, img, title, description here */}
             {project.icons.map((icon, key) => <img src={icon.content} />)}
        </div>
    )
}

answered May 6, 2018 at 18:02

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

How to map a 2d array in React Js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related