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.

Drew Reese · Accepted Answer · 2021-01-27 10:21:00Z

2

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(", ")}
  </>
)}

edited Jan 27, 2021 at 10:21

answered Jan 27, 2021 at 10:14

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Umair Jameel Over a year ago

thanks for the answer, there is no error now. But it is not printing city and country code when !hideCurrentLocation == true. Both are strings but getting converted into boolean.

Drew Reese Over a year ago

@UmairJameel Oops, meant to filter the array, sorry. the .filter(Boolean) will filter out falsey values, leaving only the defined city or country_code2 left to join together.

Collectives™ on Stack Overflow

How to render conditional HTML elements in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related