Nesting a map function within a map function in React.JS

Question

I am trying to nest a map function which is pulling data from a JSON file. My outer map function executes fine. the inner map function seems to be throwing errors saying it is not "item.map is not a function" and I am wondering if this is just a syntactical error or what. below is my Client.js file:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import ClientList from "../Clients/ClientList";
import ClientListData from "../Clients/ClientListData";

class Client extends Component {
render() {
    return (
    <div>
        {ClientListData.map(function(item, i) {
          return (
            <div className="column-wrap list half-green" key={i}>
              <div className="column half title">
                <h3>{item.bannerText}</h3>
              </div>    
              <div className="column half details">
              {item.map(function(innerItem, i) {
                return (   
                  <ClientList imgClass={innerItem.imgClass} imgSrc={innerItem.imgSrc} imgAlt={innerItem.imgAlt} imgText={innerItem.imgText} year={innerItem.year} /> 
                );
              })}
              </div>   
            </div>
            );
        })}
    </div>
    )

}
}
export default Client;

I have this file called ClientList.js which I am importing into Client.js:

 import React, { Component } from "react";
 import { Link } from "react-router-dom";
 import ClientListData from "../Clients/ClientListData";

 class ClientList extends Component {
 render() {
     return (
          <div className="client-details">
            <div className="logo-wrap">
              <img className={this.props.imgClass} src={this.props.imgSrc} alt={this.props.imgAlt} />
            </div>
            <span className="client">
              {this.props.imgText}
            </span>
            <ul>
              <li>{this.props.year}</li>
            </ul>
          </div>
     );
 }
 }
 export default ClientList;

Here is my JSON file called ClientListData.json:

[
  {
"bannerText": "Over $10 Million",
"theClients" :[
     {
      "imgClass": "logo pcb",
      "imgSrc": "logos/[email protected]",
      "imgAlt": "Panama City Beach",
      "imgText": "Panama City Beach",
      "year": "2016 | AOR"
    }
 ]
  },

  {
"bannerText": "$5 - 10 Million",
"theClients" :[
       {
      "imgClass": "logo pcb",
      "imgSrc": "logos/[email protected]",
      "imgAlt": "Panama City Beach",
      "imgText": "Panama City Beach",
      "year": "2016 | AOR"
    },
     {
      "imgClass": "logo pcb",
      "imgSrc": "logos/[email protected]",
      "imgAlt": "Panama City Beach",
      "imgText": "Panama City Beach",
      "year": "2016 | AOR"
    },
     {
      "imgClass": "logo pcb",
      "imgSrc": "logos/[email protected]",
      "imgAlt": "Panama City Beach",
      "imgText": "Panama City Beach",
      "year": "2016 | AOR"
    }
]
}
]

jsdeveloper · Accepted Answer · 2019-03-21 21:13:47Z

1

It should be:

item.theClients.map(function(innerItem, i) {

You are missing theClients key.

answered Mar 21, 2019 at 21:13

jsdeveloper

4,0751 gold badge18 silver badges15 bronze badges

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

3 Comments

Aries Azad Over a year ago

can you explain why that is the key? Where is that key pulling from? Just for knowledge. It worked perfectly. @jsdeveloper

jsdeveloper Over a year ago

Look at the structure of the json file! The client array is inside the 'theclients' property. No worries.

jsdeveloper Over a year ago

ha it should do!

Collectives™ on Stack Overflow

Nesting a map function within a map function in React.JS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related