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;

Answer 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>
  );

Answer 2

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

Answer 3

Try this instead

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

Answer 4

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.

Answer 5

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;