So I have read quite a lot about react conditional rendering on the official docs and on STO as well but I have some issues and doubts.
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>
);
My objective here is I'm trying to check if the value of {game.embed_url} is NULL then no <iframe> should be rendered, else <iframe> should be rendered,
Ofc all this would be much simpler with a if/else but since I'm inside the return I cannot use that and I'm not sure how to proceed with this.
I'm sorry if the question is too basic but I have spent too much time trying to figure it out and just keep breaking my application.
just extract the logic to a function and use the 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>
);
EDIT: Just as a note to the OP and whoever reads this, the pattern they are trying to do is called short circuiting and can be considered an anti pattern by some people when you use it in place of an if. Example: https://www.codereadability.com/dont-use-short-circuiting-when-you-want-an-if-statement/
I personally have nothing against it but think using ifs improves readability.
I believe you need to use the ternary operator in this type of situation:
{
game.live_embed_url ?
(<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620">
</iframe>)
: null
}
You do not need !! to check for value. Right now what's happening is, if game.embed_url is undefined, !!`${game.live_embed_url}` will evaluate to !!'undefind' which will evaluate to true because of the 'undefind' string.
In javascript any no-empty string evaluates to true.
You can try the following
{game.live_embed_url && (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620">
</iframe>)}