-1

I'm trying to put an if else statement inside JSX curly braces like:

<div>
  {
    if (condition) {
      <h1>FOO</h1>
    } else {
      <h2>BAR</h1>
    }
  }
</div>

See here.

But I'm getting this error.

Ernesto Stifano
  • 3,027
  • 1
  • 10
  • 20
Usama Shakeel
  • 21
  • 3
  • 1
    Welcome to Stack Overflow! Please visit [help], take [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. Post CODE, not PICTURES of code – mplungjan Jan 07 '21 at 11:27
  • 2
    Does this answer your question? [if-else statement inside jsx: ReactJS](https://stackoverflow.com/questions/44046037/if-else-statement-inside-jsx-reactjs) – MohammadHosseinZiyaaddini Jan 07 '21 at 16:08

1 Answers1

0

you can not use if keyword inside JSX. So to solve your issue

{
  post.weather[0].main === "Haze" && <WiDayHaze size={100} color="black">
  post.weather[0].main === "Sunny" && <WiSunrise size={100} color="black">
}
Prince Sodhi
  • 2,845
  • 2
  • 21
  • 35