2

Quiero hacer un calculo matematico para hacer un componente que coloque ciertos iconos de estrellas segun el rate pasado por propiedades.

en el render tengo:

render() {
  let {rate} = this.props
  return (
    <div>
      {this.getStars(rate) }
    </div>
  );
}

y mi funcion getStars es la siguiente:

getStars(rate){
  let items = []
  for(let i = 0; i < 10; i++){
    (
      items.push(
        <div className="star" key={i}>
          { rate * 2 > i && i % 2 && (
            <i className="fas fa-star"></i>
          )}
        </div>
      )
    )
  }

  return items;
}

El problema ocurre aqui cuando uso i % 2:

{ rate * 2 > i && i % 2 && (
  <i className="fas fa-star"></i>
)}

Asi como está i % 2 rederiza un 0, literal

Coloco la condicion al inicio del for algo como:

for(let i = 0; i < 10; i++){
  let isValidStar = rate * 2 > i && i % 2
  (
    items.push(
      <div className="star" key={i}>
        { isValidStar && (
          <i className="fas fa-star"></i>
        )}
      </div>
    )
  )
}

y me sale un error: Uncaught TypeError: 2 is not a function

El modulo (%) es el que me está dando el problema

2 respuestas 2

2

El paréntesis que engloba a items.push está de más. En el fondo es como si estuvieses pasando como parámetro a una función 2 el resultado de items.push. Algo como:

2('lo que sea')

La manera correcta sería:

  for (let i = 0; i < 10; i++) {
    let isValidStar = rate * 2 > i && i % 2;
    items.push(
      <div className="star" key={i}>
        {isValidStar && <i className="fas fa-star" />}
      </div>
    );
  }
1
  • Es curioso que 0 && elemento muestre 0, pero 1 && elemento muestre el elemento... supongo que es mejor trabajar sólo con booleanos en este caso Commented el 6 jun. 2019 a las 8:33
1

Parte del problema es el operador && en React, que se comporta de un modo distinto cuando la condición es false y cuando es un valor "falso", como 0. Eso unido a que tienes 2 operadores &&, te crea ese problema:

class App extends React.Component {
  constructor() {
    super();
    this.test = 0;
    setTimeout(() => {
      this.test=1; //pasamos a un valor "verdadero"
      this.forceUpdate();
    },2000);
  }

  render() {
    return (<div>{this.test && <p>Esto es un test :)</p>}</div>);
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

class App2 extends React.Component {
  constructor() {
    super();
    this.test = false;
    setTimeout(() => {
      this.test = true; //trabajando con booleanos todo el tiempo
      this.forceUpdate();
    },2000);
  }

  render() {
    return (<div>{this.test && <p>Esto es otro test :)</p>}</div>);
  }
}

ReactDOM.render(<App2 />, document.getElementById('root2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

<div id="root2"></div>

Te recomiendo hacer algo como añadir una doble negación para forzar que el valor comprobado sea un booleano: !!(cond)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.