Diferencia entre revisiones de «React map array and object»

De enunpimpam
Saltar a: navegación, buscar
 
Línea 29: Línea 29:
 
</syntaxhighlight>
 
</syntaxhighlight>
 
Importamos el archivo se mapea para que cada objeto el array se renderice, importante declarar el atributo key en el objeto contenedor.
 
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";
 
import data from "./data.json";
  

Revisión actual del 14:51 21 ago 2020

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