React array not mapping correctly - arrays

Question

The JSON data.js file
export const paintData = [
{
paint: [
{
name: "Weathered Moss N380-3",
lrv: "LRV:49 R:186 G:187 B:179",
rgb: "186, 187, 179",
url: "https://www.behr.com/consumer/ColorDetailView/N380-3",
},
{
name: "Jungle Camouflage N350-4",
lrv: "LRV:38 R:170 G:167 B:148",
rgb: "170, 167, 148",
url: "https://www.behr.com/consumer/ColorDetailView/N350-4/",
},
],
trim: [
{
name: "White 52",
lrv: "LRV:83 R:235 G:235 B:230",
rgb: "235, 235, 230",
url: "https://www.behr.com/consumer/ColorDetailView/52/",
},
{
name: "Authentic Tan N290-2",
lrv: "LRV:73 R:234 G:221 B:198",
rgb: "234, 221, 198",
url: "https://www.behr.com/consumer/ColorDetailView/N290-2/",
},
],
accent: [
{
name: "English Custard M290-5",
lrv: "LRV:51 R:226 G:182 B:108",
rgb: "226, 182, 108",
url: "https://www.behr.com/consumer/ColorDetailView/M290-5/",
},
{
name: "Summerwood S290-4",
lrv: "LRV:48 R:212 G:178 B:139",
rgb: "212, 178, 139",
url: "https://www.behr.com/consumer/ColorDetailView/S290-4/",
},
],
}
]
this is the Paint.js file
import React, { Component } from "react";
import { Container, Col, Row } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { paintData } from "./data";
export default class Paint extends Component {
render() {
return (
<Container className="mb-5">
<div>
<p className="font-weight-bold">Approval Exterior Paint Color</p>
<hr className="my-4" />
<p className="font-italic">
What are the approved exterior paint colors?
</p>
<p className="text-center lead">
<strong>
No Reds, Dark Blue or Soft Boiled P270-6 for base colors.
</strong>
</p>
<p className="text-center">
Colors may appear different based on your electronic resolution and
settings. Color codes are the same as retrieved from Behr’s website.
</p>
<br />
</div>
<Row>
{paintData.map((data) => {
return (
<Col>
<div
style={{
background: `rgb(${data.paint.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{data.paint.name}</p>
<p>{data.paint.lrv}</p>
<a href={data.paint.url} target="_blank">
Link
</a>
</div>
<div
style={{
background: `rgb(${data.trim.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{data.trim.name}</p>
<p>{data.trim.lrv}</p>
<a href={data.trim.url} target="_blank">
Link
</a>
</div>
<div
style={{
background: `rgb(${data.accent.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{data.accent.name}</p>
<p>{data.accent.lrv}</p>
<a href={data.accent.url} target="_blank">
Link
</a>
</div>
</Col>
);
})}
</Row>
</Container>
);
}
}
Image:
I am trying to map three different arrays separately, along with some sub-arrays. The top js file is my JSON file, and the bottom is my Paint.js file. I have an issue mapping out the JSON. How do I map the arrays properly to allow three different categories? The idea is to have 3 paint colors overlap each other for the HOA community. Any help would be great, and thank you in advance.

Answer 1

just taking your paint section
Instead of
<div
style={{
background: `rgb(${data.paint.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{data.paint.name}</p>
<p>{data.paint.lrv}</p>
<a href={data.paint.url} target="_blank">
Link
</a>
</div>
Try this( I didn't test this code, but should work)
{data.paint.map((paintItem)=> {
return (
<div
style={{
background: `rgb(${paintItem.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{paintItem.name}</p>
<p>{paintItem.lrv}</p>
<a href={paintItem.url} target="_blank">
Link
</a>
</div>
)
})
}
You were not seeing the data because this code <p{data.paint.name}</p> is actually trying to access data.paint which is an array.
You will need to update the other sections as well, where you use trim and accent
Also Tip: would be easier to read and manage if you separate this code into diff components.

Answer 2

You can only iterate over arrays, not objects.
This must be iteration part you are looking for.
{
paintData.paint.map( (paint, index) => (
<Col>
<div
style={{
background: `rgb(${paint.rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{paint.name}</p>
<p>{paint.lrv}</p>
<a href={paint.url} target="_blank">
Link
</a>
</div>
<div
style={{
background: `rgb(${paintData.trim[index].rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{paintData.trim[index].name}</p>
<p>{paintData.trim[index].lrv}</p>
<a href={paintData.trim[index].url} target="_blank">
Link
</a>
</div>
<div
style={{
background: `rgb(${paintData.accent[index].rgb})`,
paddintTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{paintData.accent[index].name}</p>
<p>{paintData.accent[index].lrv}</p>
<a href={paintData.accent[index].url} target="_blank">
Link
</a>
</div>
</Col>
))
}

Answer 3

Thank you everyone for your replies, I was able to solve the problems in a different route.
import React, { Component } from "react";
import { Container, Col, Row } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { paintData } from "../data/paintData";
import { trimData } from "../data/trimData";
import { accentData } from "../data/accentData";
export default class Paint extends Component {
render() {
return (
<Container className="mb-5">
<div>
<p className="font-weight-bold">Approval Exterior Paint Color</p>
<hr className="my-4" />
<p className="font-italic">
What are the approved exterior paint colors?
</p>
<p className="text-center lead">
<strong>
No Reds, Dark Blue or Soft Boiled P270-6 for base colors.
</strong>
</p>
<p className="text-center">
Colors may appear different based on your electronic resolution and
settings. Color codes are the same as retrieved from Behr’s website.
</p>
<br />
</div>
<Row>
<Col>
{paintData.map((data) => {
return (
<div
style={{
background: `rgb(${data.rgb})`,
paddingTop: "10px",
paddingBottom: "10px",
}}
>
<p>Paint</p>
<p>{data.name}</p>
<p>{data.lrv}</p>
<a href={data.url} target="_blank">
Link to {data.name}
</a>
</div>
);
})}
</Col>
<Col>
{trimData.map((data) => {
return (
<div
style={{
background: `rgb(${data.rgb})`,
paddingTop: "10px",
paddingBottom: "10px",
}}
>
<p>Trim</p>
<p>{data.name}</p>
<p>{data.lrv}</p>
<a href={data.url} target="_blank">
Link to {data.name}
</a>
</div>
);
})}
</Col>
<Col>
{accentData.map((data) => {
return (
<div
style={{
background: `rgb(${data.rgb})`,
paddingTop: "10px",
paddingBottom: "10px",
}}
>
<p>Accent</p>
<p>{data.name}</p>
<p>{data.lrv}</p>
<a href={data.url} target="_blank">
Link to {data.name}
</a>
</div>
);
})}
</Col>
</Row>
</Container>
);
}
}
Everyone's posts have given me ideas on how to fix the problem that I have been facing. Thank you.