Tengo un componente que se ve más o menos así:
import cx from 'clsx'; const myComponent = () => { function myFunc(binaryList) { for (const binaryVal of binaryList) { if (binaryVal == 1) { return <div className={cx(styles.all, styles.special)}></div>; } else if (binaryVal == 0) { return <div className={cx(styles.all)}></div>; } } } return ( <div className={styles.wrapper}> <div className={styles.listClass}>{myFunc(myBinaryList)}</div> </div> ); }; export default myComponent; Básicamente, obtengo una lista ( myBinaryList ) de algún lugar, que ingreso en la función myFunc . Esta lista puede tener diferentes longitudes, pero consta de 1 y 0, por lo que algo como:
myBinaryList = [0, 0, 1, 1, 1, 0, 0, 1] Lo que me gustaría hacer es tomar esta lista myBinaryList , usarla en la función myFunc , y luego debería generar la misma cantidad de divs que la longitud de la lista. Entonces, básicamente, el resultado de esta lista debería ser:
<div className={cx(styles.all)}></div> <div className={cx(styles.all)}></div> <div className={cx(styles.all, styles.special)}></div> <div className={cx(styles.all, styles.special)}></div> <div className={cx(styles.all, styles.special)}></div> <div className={cx(styles.all)}></div> <div className={cx(styles.all)}></div> <div className={cx(styles.all, styles.special)}></div>Pero en este momento solo obtengo un div como salida. ¿Qué estoy haciendo mal?
Debe devolver una matriz de divs. Ahora su función myFunc devuelve solo un div. Intenta hacerlo con el mapa.
function myFunc(binaryList) { return binaryList.map(binaryVal => { if (binaryVal == 1) { return <div className={cx(styles.all, styles.special)}></div> } else if (binaryVal == 0) { return <div className={cx(styles.all)}></div> } }); }