Diferencia entre revisiones de «Pasar datos por el estado»

De enunpimpam
Saltar a: navegación, buscar
(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>
    );
  }