I am confused how can I map multiple nested array of data in react and display them in a table.
The table should contain the details of the collection: title, location, description and keywords from the collection.
Here is my react code
import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";
import axios from "axios";
function App() {
const [data, setData] = useState([]);
useEffect(() => {
axios
.get("https://images-api.nasa.gov/search?media_type=image")
.then((response) => {
setData(response.data);
})
.then(
(response) => {},
(err) => {
console.log(err);
}
);
}, []);
console.log(data);
return (
<div className="App grid place-content-center h-screen gap-24">
<form className="">
<label
for="default-search"
>
Search
</label>
<div >
<div >
<svg
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
></path>
</svg>
</div>
<input
type="search"
id="default-search"
placeholder="Search Mockups, Logos..."
required
/>
<button
type="submit"
>
Search
</button>
</div>
</form>
<div >
<div >
<div >
<div >
<table>
<thead >
<tr>
<th >title</th>
<th >location</th>
<th >description</th>
<th >keywords</th>
<th >Edit</th>
<th >Delete</th>
</tr>
</thead>
<tbody >
{data?.collection?.items?.map((items) => {
{
items?.data?.map((item) => {
<tr >
<td >
{item?.data?.title}
</td>
<td >
<div >
{item?.data?.location}
</div>
</td>
<td >
<div >
{item?.data?.description}
</div>
</td>
<td >
{item?.data?.keywords}
</td>
<td >
<a
href="#"
>
Edit
</a>
</td>
<td >
<a
href="#"
>
Delete
</a>
</td>
</tr>;
});
}
})}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;
Here is the nested array of data.
"collection": {
"version": "1.0",
"href": "http://images-api.nasa.gov/search?media_type=image",
"items": [
{
"href": "https://images-assets.nasa.gov/image/KSC-2009-4794/collection.json",
"data": [
{
"center": "KSC",
"title": "KSC-2009-4794",
"location": "Kennedy Space Center, FL",
"nasa_id": "KSC-2009-4794",
"media_type": "image",
"date_created": "2009-08-19T00:00:00Z",
"description": "CAPE CANAVERAL, Fla. – In NASA Kennedy Space Center's Orbiter Processing Facility 2, workers begin removing the forward reaction control system, or FRCS, from space shuttle Endeavour's forward fuselage nose area. The FRCS provides the thrust for attitude (rotational) maneuvers (pitch, yaw and roll) and for small velocity changes along the orbiter axis (translation maneuvers). Endeavour is designated as the shuttle for the STS-130 mission, targeted for launch in February 2010. Photo credit: NASA/Jack Pfaller"
}
],
"links": [
{
"href": "https://images-assets.nasa.gov/image/KSC-2009-4794/KSC-2009-4794~thumb.jpg",
"rel": "preview",
"render": "image"
}
]
},
{
"href": "https://images-assets.nasa.gov/image/KSC-2009-4795/collection.json",
"data": [
{
"center": "KSC",
"title": "KSC-2009-4795",
"location": "Kennedy Space Center, FL",
"nasa_id": "KSC-2009-4795",
"media_type": "image",
"date_created": "2009-08-19T00:00:00Z",
"description": "CAPE CANAVERAL, Fla. – In NASA Kennedy Space Center's Orbiter Processing Facility 2, a worker removes the forward reaction control system, or FRCS, from space shuttle Endeavour's forward fuselage nose area. The FRCS provides the thrust for attitude (rotational) maneuvers (pitch, yaw and roll) and for small velocity changes along the orbiter axis (translation maneuvers). Endeavour is designated as the shuttle for the STS-130 mission, targeted for launch in February 2010. Photo credit: NASA/Jack Pfaller"
}
],
"links": [
{
"href": "https://images-assets.nasa.gov/image/KSC-2009-4795/KSC-2009-4795~thumb.jpg",
"rel": "preview",
"render": "image"
}
]
},
{
"href": "https://images-assets.nasa.gov/image/KSC-2009-4798/collection.json",
"data": [
{
"center": "KSC",
"title": "KSC-2009-4798",
"location": "Kennedy Space Center, FL",
"nasa_id": "KSC-2009-4798",
"media_type": "image",
"date_created": "2009-08-20T00:00:00Z",
"description": "CAPE CANAVERAL, Fla. – The 327-foot tall Ares I-X rocket stretches into the upper regions of NASA Kennedy Space Center's Vehicle Assembly Building. The rocket is stacked on the mobile launcher platform in High Bay 3. Mission, program and NASA decals are lined up on the stack below the U.S. flag. Five super stacks make up the upper stage that are integrated with the four-segment solid rocket booster first stage below. Ares I-X is the test vehicle for the Ares I, which is part of the Constellation Program to return men to the moon and beyond. The Ares I-X flight test is targeted for Oct. 31. Photo credit: NASA/Jack Pfaller"
}
],
"links": [
{
"href": "https://images-assets.nasa.gov/image/KSC-2009-4798/KSC-2009-4798~thumb.jpg",
"rel": "preview",
"render": "image"
}
]
},
How can I render title, location, description and keywords from the collection from the array of data?
CodePudding user response：
you are not returning after mapping, for example this WILL NOT WORK:
return (
<div className="App">
{data.items.map((e) => {
<div>
{e.data.map((s) => (
<div>
<div>{s.title}</div>
<div>{s.location}</div>
</div>
))}
</div>;
})}
</div>
)
ESLINT will through a warning says Expected to return a value in arrow function. (array-callback-return)
that means you need either to add a return statement after the map or remove the curly brackets {}. for example solution A remove curly brackets :
return (
<div className="App">
{data.items.map((e) =>
<div>
{e.data.map((s) => (
<div>
<div>{s.title}</div>
<div>{s.location}</div>
</div>
))}
</div>
)}
</div>
);
solution B add the return statement:
return (
<div className="App">
{data.items.map((e) => {
return (
<div>
{e.data.map((s) => {
return (
<div>
<div>{s.title}</div>
<div>{s.location}</div>
</div>
);
})}
</div>
);
})}
</div>
);