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?](https://stackoverflow.com/questions/43423694/react-how-to-map-nested-object-values/43425505#43425505) — Shubham Khatri, Jan 02 '19 at 05: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, Jan 02 '19 at 07:52
@Shubham Khatri i tried as you said but. its showing me output 5 times on console. — vidy, Jan 02 '19 at 08:46

score 1 · Answer 1 · answered Jan 02 '19 at 05:58

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 02 '19 at 05:58

Lakshya Khanna

63
7

score 1 · Answer 2 · answered Jan 02 '19 at 08:56

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 02 '19 at 08:56

Nagesh Dhope

797
5
13

score 1 · Accepted Answer · answered Jan 04 '19 at 05:18

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 04 '19 at 05:18

Vinay

2,272
4
19
34

score 0 · Answer 4 · answered Jan 02 '19 at 06:45

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).

score 0 · Answer 5 · answered Jan 02 '19 at 06:49

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

this dosent work. I am getting error "TypeError: Invalid attempt to spread non-iterable instance". — vidy, Jan 02 '19 at 06:59

How to map an array of map in react?

5 Answers5