React Conditional Rendering to check if something is an empty tag

Question

I have the following code:

{item && item.description && (
      <Link
           style={{ display: 'block', paddingBottom: '2px' }}
           title="View Details"
           onClick={() => setIsOpen(!isOpen)}
           {...aria}
            >
           View Details
      <Icon icon={isOpen ? 'collapse_arrow' : 'expand_arrow'}
            marginLeft="5px"
            verticalAlign="bottom"
            />
     </Link>
  )}

The problem is that item.description could be an empty

tag and therefore the condition is met and a Link component is rendered when it actually shouldn't be.

How is the best way I could avoid this case?

Thanks in advance!

Sometimes the api returns <p></p> like that and it causes the component to render. — sens_vk
– sens_vk, Commented Sep 30, 2020 at 7:04
Well your 2 options are either do a regex to check for an empty tag, or create an element from the string and checks its inner text (see here for reference: stackoverflow.com/questions/494143/…) — Jayce444
– Jayce444, Commented Sep 30, 2020 at 7:10

Prateek Thapa · Accepted Answer · 2020-09-30 12:38:42Z

1

You could use a regex to check for empty tags.

function checkForEmptyTags(tags) {
  if (!tags) return false;

  const EMPTY_TAGS_REGEX = RegExp('<[^>]*>\s*<\/[^>]*>');
  return EMPTY_TAGS_REGEX.test(tags);
}

{item && !checkForEmptyTags(item.description) && (
      <Link
           style={{ display: 'block', paddingBottom: '2px' }}
           title="View Details"
           onClick={() => setIsOpen(!isOpen)}
           {...aria}
            >
           View Details
      <Icon icon={isOpen ? 'collapse_arrow' : 'expand_arrow'}
            marginLeft="5px"
            verticalAlign="bottom"
            />
     </Link>
  )}

edited Sep 30, 2020 at 12:38

answered Sep 30, 2020 at 7:22

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

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

2 Comments

sens_vk Over a year ago

I just tried it and it did exactly the opposite - it now renders those who are empty and not those are have tags. How can I change the behaviour?

Prateek Thapa Over a year ago

Just flip the boolean. I've updated the code above. !checkForEmptyTags(item.description)

Collectives™ on Stack Overflow

React Conditional Rendering to check if something is an empty tag

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related