javascript - How to render conditional HTML elements in React

Question

What is wrong with the following code? I have tried many options given in the link.

  { 
      !hideCurrentLocation && (
        {currentLocation?.city}
        {currentLocation?.city && ', '}
        {currentLocation?.country_code2}
      )
  }

It is giving error on line {currentLocation?.city} that a comma is required.

question from:https://stackoverflow.com/questions/65916905/how-to-render-conditional-html-elements-in-react

Answer 1

Too many brackets. Also, if you're trying to render a "city, countrycode" you need to return a single node for valid JSX. I suggest dumping the city and country code into an array and joining them into a single string.

{!hideCurrentLocation && (
  <>
    {[currentLocation?.city, currentLocation?.country_code2]
      .filter(Boolean)
      .join(", ")}
  </>
)}