React map array and object

De enunpimpam
Revisión del 14:51 21 ago 2020 de Nacho (discusión | contribuciones)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
Saltar a: navegación, buscar

Archivo 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"
}
       ]},]

Importamos el archivo se mapea para que cada objeto el array se renderice, importante declarar el atributo key en el objeto contenedor.

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>
	</>
);}}