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/PCB@2x.png",
"imgAlt": "Panama City Beach",
"imgText": "Panama City Beach",
"year": "2016 | AOR"
}
]
},
{
"bannerText": "$5 - 10 Million",
"theClients" :[
{
"imgClass": "logo pcb",
"imgSrc": "logos/PCB@2x.png",
"imgAlt": "Panama City Beach",
"imgText": "Panama City Beach",
"year": "2016 | AOR"
},
{
"imgClass": "logo pcb",
"imgSrc": "logos/PCB@2x.png",
"imgAlt": "Panama City Beach",
"imgText": "Panama City Beach",
"year": "2016 | AOR"
},
{
"imgClass": "logo pcb",
"imgSrc": "logos/PCB@2x.png",
"imgAlt": "Panama City Beach",
"imgText": "Panama City Beach",
"year": "2016 | AOR"
}
]
}
]
It should be:
item.theClients.map(function(innerItem, i) {
You are missing theClients
key.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.