Así que he leído bastante sobre la representación condicional de reacción en los documentos oficiales y también en STO, pero tengo algunos problemas y dudas.
return ( <div className="container is-fluid"> {games.map((game) => ( <div className="gameContainer" key={game.id}> {!!`${game.live_embed_url}` && (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620"> </iframe>)} <h2 className="h2__whiteuk-text-large">{game.name}{game.live_embed_url}</h2> </div> ))} </div> ); Mi objetivo aquí es que estoy tratando de verificar si el valor de {game.embed_url} es NULL, entonces no se debe representar <iframe <iframe> , de lo contrario se debe representar <iframe> ,
Por supuesto, todo esto sería mucho más simple con un if/else, pero como estoy dentro del return, no puedo usarlo y no estoy seguro de cómo proceder con esto.
Lo siento si la pregunta es demasiado básica, pero he pasado demasiado tiempo tratando de resolverlo y sigo rompiendo mi aplicación.
simplemente extraiga la lógica a una función y use el if:
const renderIframe = (game) => { if (!game.live_embed_url) { return null; } return ( <iframe src={`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullScreen="true" scrolling="no" height="378" width="620" ></iframe> ); }; return ( <div className="container is-fluid"> {games.map((game) => ( <div className="gameContainer" key={game.id}> {renderIframe(game)} <h2 className="h2__whiteuk-text-large"> {game.name} {game.live_embed_url} </h2> </div> ))} </div> );EDITAR: solo como una nota para el OP y quien lea esto, el patrón que están tratando de hacer se llama cortocircuito y algunas personas pueden considerarlo un patrón anti cuando lo usa en lugar de un si. Ejemplo: https://www.codereadability.com/dont-use-short-circuiting-when-you-want-an-if-statement/
Personalmente, no tengo nada en contra, pero creo que usar ifs mejora la legibilidad.
Creo que necesita usar el operador ternario en este tipo de situación:
{ game.live_embed_url ? (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620"> </iframe>) : null }No necesitas !! para comprobar el valor. En este momento, lo que sucede es que, si game.embed_url no está definido, !!`${game.live_embed_url}` se evaluará como !!'undefind' , que se evaluará como true debido a la cadena 'undefind'.
En javascript, cualquier cadena no vacía se evalúa como true .
Puedes intentar lo siguiente
{game.live_embed_url && (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620"> </iframe>)}