En un tutorial que estoy siguiendo, vi un uso interesante de un literal de plantilla para aplicar clases dinámicamente.

El JSX relevante se parece a:

 <button key={job.id} className={`job-btn ${index === i && "active-btn"}`} onClick={() => setIndex(i)} > {job.company} </button>

La evaluación && de cortocircuito hace que "active-btn" solo se aplique cuando el índice del trabajo (i) coincida con el índice de valor de estado. Un efecto secundario de esto es que si la expresión se evalúa como falsa, lo que significa que si el índice (i) del trabajo no es el índice de valor de estado, entonces el valor booleano falso se coaccionará a una cadena, se adjuntará como una clase y se podrá orientar. con el selector .false. Entonces, los botones no activos se pueden seleccionar con el selector .false.

¿Es esto un gran problema o se acepta como una forma razonable de hacer las cosas? Si no es ideal, ¿hay alguna forma diferente de lograr esta adición dinámica de clases sin este efecto secundario? Gracias.

Tal vez sea una pregunta tonta. La solución simple es simplemente evitar usar .false para diseñar las cosas, pero pensé en preguntar ya que soy nuevo en React.

Editar: una forma de la que me di cuenta es usar ${index === i ? "active-btn" : ""} Esto parece mejor.