Why my last if statement in React.js doesn't work? I'm using jsx

Question

What i want to do is to show movie not found when there isn't any movie to show. The issue is with the last if conditional which doesn't grab the variable movieNotFound. I don't quite know if it is only beacuse if conditional in jsx doesn't work or is another issue. I also had tried with ternary operator and same thing.

  const [isLoading, setisLoading] = useState(true);
  const [movieNotFound, setmovieNotFound] = useState(false);

  return (
    <div>
      {isLoading ? (
        <div class="spinner-grow" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      ) : (
        <>
          if (movieNotFound === true)
          {<h1>Movie not found</h1>} else
          {
            <div>
              <h1>{movie.title}</h1>
              <h1>{movie.overview}</h1>
            </div>
          }
        </>
      )}
    </div>
  );
}

export default MovieDetails;

Side note: In general, it's best to have flags expressed in positive terms, e.g. movieFound rather than movieNotFound. That way, if you need to do something when the movie is found, you're doing if (movieFound) rather than if (!movieNotFound). (This is not a hard-and-fast rule, but it's a good guideline.) — T.J. Crowder
– T.J. Crowder, Commented May 6, 2021 at 13:59
@German alle, can you please share screenshot of part of your view that you are seeing and that you are expecting? because logically if you set isLoading=false and movieNotFound=true with ternary operator for your last if, it should work — tareq aziz
– tareq aziz, Commented May 6, 2021 at 14:55

T.J. Crowder · Accepted Answer · 2021-05-06 13:55:46Z

Your if is just text in the JSX output. It's inside a fragment (<>...</>), but not inside an expression ({...}), so it's just text.

You have several options for doing this. I would just use if/else if/else prior to the return:

const [isLoading, setisLoading] = useState(true);
    const [movieNotFound, setmovieNotFound] = useState(false);
    let body;
    if (isLoading) {
        body = 
          <div class="spinner-grow" role="status">
              <span class="visually-hidden">Loading...</span>
          </div>;
    } else if (movieNotFound) {
        body = <h1>Movie not found</h1>;
    } else {
        body =
          <div>
              <h1>{movie.title}</h1>
              <h1>{movie.overview}</h1>
          </div>;
    }
    return <div>{body}</div>;
}

or you can use another conditional operator as you did for the previous thing in that same code:

const [isLoading, setisLoading] = useState(true);
    const [movieNotFound, setmovieNotFound] = useState(false);
  
    return (
        <div>
            {isLoading ? (
                <div class="spinner-grow" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            ) : (
                <>
                    {movieNotFound
                        ?   <h1>Movie not found</h1>
                        :
                            <div>
                                <h1>{movie.title}</h1>
                                <h1>{movie.overview}</h1>
                            </div>
                    }
                </>
            )}
        </div>
    );
}

or use multiple mutually-exclusive expressions with &&:

const [isLoading, setisLoading] = useState(true);
    const [movieNotFound, setmovieNotFound] = useState(false);
  
    return (
        <div>
            {isLoading ? (
                <div class="spinner-grow" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            ) : (
                <>
                    {movieNotFound && <h1>Movie not found</h1>}
                    {!movieNotFound &&
                        <div>
                            <h1>{movie.title}</h1>
                            <h1>{movie.overview}</h1>
                        </div>
                    }
                </>
          )}
      </div>
    );
}

Udendu Abasili · Accepted Answer · 2021-05-06 13:55:41Z

1

Why not do this instead

return (
    <div>
      {isLoading ? (
        <div class="spinner-grow" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      ) : (
        movieNotFound  ? 
          <h1>Movie not found</h1> : (
            <div>
              <h1>{movie.title}</h1>
              <h1>{movie.overview}</h1>
            </div>
          )

      )}
    </div>
  );

answered May 6, 2021 at 13:55

Udendu Abasili

1,2232 gold badges16 silver badges31 bronze badges

Comments

FLash · Accepted Answer · 2021-05-06 13:57:18Z

0

Try this instead

{ movieNotFound && <h1>Movie not found</h1> }
{ 
  !movieNotFound &&
  <div>
     <h1>{movie.title}</h1>
      <h1>{movie.overview}</h1>
  </div>
}

answered May 6, 2021 at 13:57

FLash

80412 silver badges32 bronze badges

Comments

Rao Virinchi · Accepted Answer · 2021-05-06 13:59:05Z

0

It is because if wont work inside JSX. No javscript will. If you want to conditionally render content, you can assign the jsx to a variable, and change it to different JSX depending on a condition. Something like this can be done:

const MainPaymentPage =(props)=>{
    const [isNextClicked,setNextClicked]=useState(false);
    let componentCode=<IntroScreen click={()=>setNextClicked(true)}/>
    if(isNextClicked){
        componentCode=<Payment/>
    }
    return(
        {componentCode}
    )
}

export default MainPaymentPage;

componentCode is the variable which initially holds some JSX, and depending on isNextClicked, is value will change to completely different JSX. Finally, the variable is rendered.

answered May 6, 2021 at 13:59

Rao Virinchi

3293 silver badges6 bronze badges

Comments

Aadhit Shanmugam · Accepted Answer · 2021-05-06 14:04:39Z

I think the following solution will work for you. The If condition is not being implemented with correct syntax. Try This:

  const [isLoading, setisLoading] = useState(true);
  const [movieNotFound, setmovieNotFound] = useState(false);

  return (
    <div>
      {isLoading ? (
        <div class="spinner-grow" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
        ) : (
            ()=> {  
                if(movieNotFound === true)
                {<h1>Movie not found</h1>}
                else
          {
            <div>
              <h1>{movie.title}</h1>
              <h1>{movie.overview}</h1>
            </div>
          }

            }
      )
      
      }
    </div>
  );


export default MovieDetails;

Collectives™ on Stack Overflow

Why my last if statement in React.js doesn't work? I'm using jsx

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related