Estoy tratando de devolver condicionalmente diferentes div s con esta función (primera vez que uso React):
currUser().played.forEach(square => { if (square === id) { console.log(0) return ( <div className="inactive"> </div> ); }; }); return ( <div className="square"> </div> ); } 0 se registra varias veces, pero todas las salidas son de clase square . ¿Cómo puedo solucionar esto?
Debería usar el método de map para generar una matriz de elementos. Al igual que:
const Square = () => { //... return ( <div> currUser().played.map(square => { if (square === id) { console.log(0) return ( <div className="inactive"> </div> ); }; return ( <div className="square"> </div> ); }) </div> ) } export default Square;No estoy seguro de que si también desea representar el div con className="square", en caso afirmativo, la forma correcta de hacerlo debería ser así:
return ( <> {currUser().played.filter(square => square === id) .map(square => ( <div className="inactive"> </div> )} <div className="square"> </div> </> )Primero, debe filtrar los elementos requeridos y luego encadenarlos con el mapa para regresar y representar los elementos deseados.
map no se puede usar con la condición if porque map siempre debe devolver algo en cada iteración. Y si realmente desea usar el mapa de condiciones, también debe devolver algo en otra cosa
Aquí se utilizan llaves para ejecutar javascript dentro de JSX.