Diferencia entre revisiones de «Pasar datos por el estado»
De enunpimpam
(Página creada con «Categoría:React <syntaxhighlight lang="js"> class Album extends React.Component { state = { data: [{ imgUrl:"https://images-assets.nasa.gov/image/PIA03240/PI…») |
|||
| (No se muestran 3 ediciones intermedias del mismo usuario) | |||
| 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 14: | Línea 15: | ||
{this.state.data.map(foto => { | {this.state.data.map(foto => { | ||
return ( | return ( | ||
| − | <li><p>{foto.keywords}</p></li>); | + | <li key={foto.nasa_id}><p>{foto.keywords}</p></li>); |
})} | })} | ||
</ul> | </ul> | ||
| 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="jsx"> | ||
| + | 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 actual del 14:52 21 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>
);
}