Diferencia entre revisiones de «Pasar datos por el estado»
De enunpimpam
Línea 1: | Línea 1: | ||
[[Categoría:React]] | [[Categoría:React]] | ||
+ | ==En una lista== | ||
<syntaxhighlight lang="js"> | <syntaxhighlight lang="js"> | ||
class Album extends React.Component { | class Album extends React.Component { | ||
Línea 21: | Línea 22: | ||
export default Album; | export default Album; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
+ | == en un componente== | ||
+ | Aqui se pasa los arreglos que están traídos al estado mediante componentDidMount(), pasados por map al <CarouselItem> | ||
+ | <syntaxhighlight lang="js"> | ||
+ | render() { | ||
+ | return ( | ||
+ | <Carousel | ||
+ | id="carousel" | ||
+ | interval="60000" | ||
+ | className="carousel-inner slider" | ||
+ | data-pause="false" | ||
+ | controls="" | ||
+ | indicators="" | ||
+ | > | ||
+ | {this.state.fotosDias.map((postData, i)=>( | ||
+ | <CarouselItem> | ||
+ | |||
+ | <img className="d-block w-100" src={postData.url} alt="" /> | ||
+ | <Carousel.Caption> | ||
+ | <h3 className="text-right"> | ||
+ | {postData.title} | ||
+ | </h3> | ||
+ | <p> | ||
+ | {postData.explanation} | ||
+ | </p> | ||
+ | </Carousel.Caption> | ||
+ | </CarouselItem> | ||
+ | ))} | ||
+ | |||
+ | </Carousel> | ||
+ | ); | ||
+ | }</syntaxhighlight> |
Revisión del 20:11 20 ago 2020
En una lista
class Album extends React.Component { state = { data: [{ imgUrl:"https://images-assets.nasa.gov/image/PIA03240/PIA03240~thumb.jpg", nasa_id: "PIA03240", keywords: "Mars,Mars Exploration Rover MER", description:"Synthetic image of the Opportunity Mars Exploration Rover inside produced using Virtual Presence in Space technology.", },],}; render() { return ( <ul> {this.state.data.map(foto => { return ( <li key={foto.nasa_id}><p>{foto.keywords}</p></li>); })} </ul> ); }} export default Album;
en un componente
Aqui se pasa los arreglos que están traídos al estado mediante componentDidMount(), pasados por map al <CarouselItem>
render() { return ( <Carousel id="carousel" interval="60000" className="carousel-inner slider" data-pause="false" controls="" indicators="" > {this.state.fotosDias.map((postData, i)=>( <CarouselItem> <img className="d-block w-100" src={postData.url} alt="" /> <Carousel.Caption> <h3 className="text-right"> {postData.title} </h3> <p> {postData.explanation} </p> </Carousel.Caption> </CarouselItem> ))} </Carousel> ); }