Issues with conditional rendering react-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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
}

CodePudding user response：

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>)}

CodePudding user response：

You can use && this way

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"
                    />
                )}
                <h2 className="h2__whiteuk-text-large">
                    {game.name}
                    {game.live_embed_url}
                </h2>
            </div>
          ))}
      </div>
  );

CodePudding user response：

I think it is because you try to check the game.live_embed_url inside string literal. In Vanilla Javascript, every String is considered true except empty string "". Try discarding string template:

game.live_embed_url && (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620">