React map array and object
De enunpimpam
Revisión del 14:51 21 ago 2020 de Nacho (discusión | contribuciones)
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> </> );}}