Saltar al contenido

bucle for en el ejemplo de código de react js

Ejemplo 1: reaccionar para bucle en render

render:function()const elements =['one','two','three'];return(<ul>elements.map((value, index)=>return<li key=index>value</li>)</ul>)

Ejemplo 2: reaccionar para bucle

<tbody>[...Array(10)].map((x, i)=><ObjectRow key=i/>)</tbody>

Ejemplo 3: reaccionar render para bucle

// for loop workaround in react render[...Array(n)].map((_, index)=><span key=index>element index</span>)

Ejemplo 4: reaccionar en bucle array

this.items=this.state.cart.map((item, key)=><li key=item.id>item.name</li>);

Ejemplo 5: cambiar el bucle de elementos reaccionar

importReactfrom'react';import'./HomePage.scss'importCol,Row,Button,Containerfrom"reactstrap";let image1 =require("../../Assets/image1.jpg");let image2 =require("../../Assets/image2.jpg");let image3 =require("../../Assets/image3.png");let image4 =require("../../Assets/image4.jpg");exportdefaultclassHomePageextendsReact.Component{constructor(props){super(props);this.state=
            imagesItems:[image1,image2,image3,image4],
            imgChange:image1,
            imageIndex:0componentDidMount=()=>let totallSize=this.state.imagesItems.length-1;setInterval(()=>if(this.state.imageIndex=== totallSize)this.setState(imageIndex:0)elsethis.setState(imageIndex:this.state.imageIndex+1),3000);render()return(<Container><div className="imageDiv"><img  src=this.state.imagesItems[this.state.imageIndex] className="imgClass"/></div></Container>);

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *