Como puedo poner IF en jsx

Question

estoy trabajando con react, y agregue un sistema de "valorar" la experiencia, quiero que al hacer clic en X estrella redireccione a un lado, y si hace clic en otra X estrella redireccione a otro formulario, hace poco me lo pasaron, pero en JavaScript y ahora aca no puedo, lo intenté y no me funcionó ninguna solución de internet.

    const thirdExample = {
      size: 40,
      count: 5,
      isHalf: false,
      value: 4,
      color: "blue",
      activeColor: "yellow",
      onChange: (newValue) => {
        console.log(`Example 3: new value is ${newValue}`);
        alert(newValue===1 ? 'redireccion del valor 1' : 'redireccion del valor 1')
      }
    
    
    };
    
    
    export default function Valorar() {
      return (
        <div className="App">
          <ReactStars {...thirdExample} />
        </div>
      );
    }

Tendría que encontrar una alternativa a esto:

  if(newValue==1){
  alert('redireccion del valor 1');
  }

jsx reactjs

); } Tendría que encontrar una alternativa a esto: if(newValue==1){ alert('redireccion del valor 1'); }

Jhoubert Rincon · Accepted Answer

Tienes dos alternativas a un if común, sería un inline if o una condicion booleana que es muy usada en jsx
El inline if sería
(condition ? whenTrue: whenFalse)

parantesis opcionales pero recomendados.
así que tu coondición:
if(newValue==1){
  alert('redireccion del valor 1');
}

Esa condición inline quedaría:
alert(newValue==1 ? 'redireccion del valor 1' : 'redireccion del valor 2')

o con el alert en la condición:
newValue==1 ? alert('redireccion del valor 1') : alert('redireccion del valor 2')

Tambien puedes concatenar este tipo de condiciones.
alert(newValue===1 ? 'redireccion del valor 1' :( newValue===2 ? 'redireccion del valor 2' : ( newValue===3 ? 'redireccion del valor 3' : 'redireccion del valor 4')))

Tambien es posible utilizar la opcion de una operación booleana que es bastante simple.
condicion && whenTrue

Y tu condición quedaría:
newValue==1 && alert('redireccion del valor 1');

Ambas opciones es posible utilizarlas en un jsx sin problema.

Como puedo poner IF en jsx

One Answer

Add your own answers!

Ask a Question