Quiero renderizar un componente basado en que una variable sea verdadera o falsa. En este momento, la condición se presenta como verdadera, pero el componente no se procesa en absoluto.
Aquí está mi código:
<div className={styles.container}> {array.map(item => { router.query.slug != item ? <Component /> : null; })} </div> Mi consola está volviendo verdadero para la condición router.query.slug != item entonces, ¿qué me estoy perdiendo?
Gracias
Falta devolver el componente de la función de mapa.
Aquí está el ejemplo que coincidirá con su problema:
Solución 1
<div className={styles.container}> {array.map(item => { return router.query.slug != item ? <Component /> : null; })} </div>Solución 2 con una sola línea
<div className={styles.container}> {array.map(item => router.query.slug != item ? <Component /> : null)} </div> Puede leer sobre la función de map aquí.
Si usa la sintaxis de block , debe especificar la palabra clave de retorno. Más información sobre la función de flecha
Prueba de esta manera.
Ejemplo:
<div className={styles.container}> {array.map(item => { return (router.query.slug != item ? <Component /> : null) })} </div>