Alternativas de bucles for y bloques if-else en ReactJS

Si alguna vez ha intentado usar for loop en React, entonces debe estar familiarizado con el error que indica Token inesperado y aparece el mismo error si también usa condiciones if.

Pseudocódigo:

import React from 'react'
import ReactDOM from 'react-dom'
import Component from "./Component"

function App() {
  return (
    <div>
        {
          for(let i =0 ; i< 5 ; i++)
             </Component>
        }
    </div>
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

Explicación: el navegador no comprende react.js, por lo que un paquete web como Babel convierte React.js en JavaScript durante la compilación. Todo en React.js se reduce a JavaScript simple. Entonces, si escribe algo en react.js que no es un JavaScript válido, obtendrá un error de compilación. El problema en el código anterior es que la declaración de retorno siempre espera un valor pero un bucle for y el bloque if no devuelve ningún valor. Entonces, las alternativas de usar estos deberían devolver algo.

Paso 1: Creación de la aplicación React

npx create-react-app loops

Paso 2: después de crear la carpeta de su proyecto ieloops, muévase a ella usando el siguiente comando:

cd loops

Estructura del proyecto: Tendrá el siguiente aspecto.

1. Alternativas de bucle for: al usar Map puede hacer casi cualquier cosa que hace un bucle for. Además, Map devuelve una array para que no haya ningún error de compilación. No olvide agregar un apoyo clave al devolver cada componente.

 Sintaxis: 

{ arr.map((parameter) => (//logic) )}

import React from 'react'
import ReactDOM from 'react-dom'
  
  
function App() {
const items = [1,2,3,4,5]
  return (
    <div>
      { items.map((item,index) => 
       (<div key={index}> Hello World {item} </div>) )}
    </div>
  )
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: ahora abra su navegador y vaya a http://localhost:3000/ 

for loop pero fuera de return: Aquí recorremos la array fuera de la declaración de devolución y almacenamos la array de componentes y luego representamos la array dentro de la declaración de devolución.      

Sintaxis:

for(initialization; condition; updation) {  //logic }

import React from 'react'
import ReactDOM from 'react-dom'
  
  
function App() {
const items = [1,2,3,4,5]
let components = [] 
for(let i = 0 ; i < items.length ; i++ ){
  components.push(<div>Hello Word {items[i]}</div>)
}
  return (
    <div>
      {components}
    </div>
  )
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: ahora abra su navegador y vaya a http://localhost:3000/ 

2. Alternativa del bloque if-else: el operador ternario hace lo mismo que un bloque if-else. Si solo desea una verificación de condición if, puede escribir nulo en la parte else.

Sintaxis:

{ (condition) ? true : false }

Aplicación.js

import React from 'react'
import ReactDOM from 'react-dom'
  
function App() {
const x = 12
  return (
    <div>
        {x % 2 === 0 ? (<h1>x is Even</h1>) : (<h1> x is Odd</h1>)}
    </div>
  )
}

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: ahora abra su navegador y vaya a http://localhost:3000/