How to map an array of map in react?

Question

I am getting map inside an array in redux store from spring controller. And i want to map through that array. but its giving me error TypeError: project_tasks.map is not a function. I can see map inside state but i am not able to map through that array. How can i do this please help me i am new to react.

this is my store

mobile.js

let mobile = [];

const mobiletasks = project_tasks.map((project_task, index) => (
<mobileItems key={project_task.viewproducts3.id} project_task={project_task} />
));  

mobile.push(mobiletasks);

mobileItems.js

import React, { Component } from 'react'

class mobileItems extends Component {
render() {
const { project_task } = this.props;
return (
   <div class="row mx-auto" style="background-color: white;">
       <div class="col-lg-2 col-md-6 mb-4">
          <a href="" style="text-decoration: none;" id="">
              <div class="card h-100">
                  <img src="" alt="" class="card-img-top zoom mt-2"/>
                  <div class="card-body text-center">
                      <h5 class="titlename text-truncate">project_task.name</h5>
                      <div class="caption">
                          <h5 class="pull-right productprice">&#8377;</h5>
                       </div>
                  </div>
              </div>
          </a>
      </div>
     </div>
);
}
}

export default mobileItems;

Please tell me what am i doing wrong here?

Possible Duplicate of React - how to map nested object values? — Shubham Khatri
– Shubham Khatri, Commented Jan 2, 2019 at 5:56
Check if project_tasks is an array. If it's not an array, then map function cannot be applied to that property(i.e. project_tasks). — Meet Zaveri
– Meet Zaveri, Commented Jan 2, 2019 at 7:52
@Shubham Khatri i tried as you said but. its showing me output 5 times on console. — vidy
– vidy, Commented Jan 2, 2019 at 8:46

Vinay · Accepted Answer · 2019-01-04 05:18:19Z

1

try this

{Object.keys(project_tasks).map((item, index) => {
if(item == "viewproducts3"){
return (project_tasks.viewproducts2.map((c) =>  {
return (
   <h1>{c.id}</h1>
  ) 
})) 
}
})}

answered Jan 4, 2019 at 5:18

Vinay

2,3394 gold badges23 silver badges34 bronze badges

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

Comments

Lakshya Khanna · Accepted Answer · 2019-01-02 05:58:31Z

1

Don't open another ( bracket after arrow function just go like this

const mobiletasks = project_tasks.map((project_task, index) =>

 <mobileItems key={project_task.viewproducts3.id}

project_task={project_task} /> );

answered Jan 2, 2019 at 5:58

Lakshya Khanna

637 bronze badges

Comments

Nagesh Dhope · Accepted Answer · 2019-01-02 08:56:17Z

1

Try this.

let mobile = [];

const mobiletasks = Object.values(project_tasks).map((project_task, index) => (
<mobileItems key={index} project_task={project_task} />
));  

mobile.push(mobiletasks);

answered Jan 2, 2019 at 8:56

Nagesh Dhope

8376 silver badges14 bronze badges

Comments

y4izus · Accepted Answer · 2019-01-02 06:45:12Z

0

Look at your redux state: project_task has this structure:

project_task: {
    project_tasks: {
        viewproducts3: [],
        viewproducts1: [],
        viewproducts2: [],
        categories: [],
        project_task: {}
    }
}

The map method is included in the Array.prototype (see map doc), so you have to use it with arrays instead of with objects (project_tasks is an object).

answered Jan 2, 2019 at 6:45

y4izus

362 bronze badges

Comments

Suc · Accepted Answer · 2019-01-02 06:49:11Z

0

Basically you are trying to map an object which is wrong,

THEORETICAL SOLUTION

project_tasks have 4 objects inside and if you are trying to map the data from viewproducts1-2-3, you need to push it to a variable like this

let tasks = []
tasks.push(...project_tasks.viewproducts1)
tasks.push(...project_tasks.viewproducts2)
tasks.push(...project_tasks.viewproducts3)

this will load every data from viewproducts1-3 to task

const mobiletasks = tasks.map((project_task, index) => (
<mobileItems key={project_task.id} project_task={project_task} />
));

and you can happily map the values :)

Hope this help

answered Jan 2, 2019 at 6:49

Suc

425 bronze badges

1 Comment

vidy Over a year ago

this dosent work. I am getting error "TypeError: Invalid attempt to spread non-iterable instance".

Collectives™ on Stack Overflow

How to map an array of map in react?

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related