React map array and object - Historial de revisiones

Nacho en 14:51 21 ago 2020

2020-08-21T14:51:39Z

Nacho en 20:06 20 ago 2020

2020-08-20T20:06:35Z

Nacho en 20:03 20 ago 2020

2020-08-20T20:03:59Z

Nacho: Página creada con «Categoría:React [ { "href": "https://images-assets.nasa.gov/image/iss035e017479/collection.json", "links": [ { "href": "https://images-…»

2020-08-17T13:55:57Z

Página creada con «Categoría:React <syntaxhighlight lang="json"> [ { "href": "https://images-assets.nasa.gov/image/iss035e017479/collection.json", "links": [ { "href": "https://images-…»

Página nueva

[[Categoría:React]]
<syntaxhighlight lang="json">
[
{
"href": "https://images-assets.nasa.gov/image/iss035e017479/collection.json",
"links": [
{
"href": "https://images-assets.nasa.gov/image/iss035e017479/iss035e017479~thumb.jpg",
"rel": "preview",
"render": "image"
}
],
"data": [
{
"media_type": "image",
"center": "JSC",
"keywords": [
"EARTH OBSERVATIONS (FROM SPACE) EXPEDITION 35",
"TWEETED PHOTO",
"SOCIAL MEDIA"],
"nasa_id": "iss035e017479",
"photographer": "Chris Hadfield",
"description": "Earth observation taken by the Expedition 35 crew ",
"date_created": "2013-04-06T00:00:00Z",
"title": "Earth Observations taken by the Expedition 35 Crew"
}
]
},
]
</syntaxhighlight>
<syntaxhighlight lang="js">
import data from "./data.json";

export default class DefaultPost extends Component {
render() {
return (
<>
<Container fluid={true}>
<Row>
{data.map((postData, index) => (
<div key={index}>
<h4>ESTA ES: {postData.href}</h4>
<p>link:{postData.links[0].href} </p>
<p>NASA ID:{postData.data[0].nasa_id}</p>
<p>TITULO:{postData.data[0].title}</p>
<p>DESCRIPCION:{postData.data[0].description}</p>
<p>TAG:{postData.data[0].keywords + " "}</p>
</div>
))}
</Row>
</Container>
</>
);
}
} </syntaxhighlight>

@@ Línea 29: / Línea 29: @@
 </syntaxhighlight>
 Importamos el archivo se mapea para que cada objeto el array se renderice, importante declarar el atributo key en el objeto contenedor.
-<syntaxhighlight lang="js">
+<syntaxhighlight lang="jsx">
 import data from "./data.json";

@@ Línea 1: / Línea 1: @@
 [[Categoría:React]]
-==
+=Archivo JSON=
 <syntaxhighlight lang="json">
+[
@@ Línea 26: / Línea 26: @@
   "title": "Earth Observations taken by the Expedition 35 Crew"
+}
         ]},]
 </syntaxhighlight>
 <syntaxhighlight lang="js">
 import data from "./data.json";