Conditionally display elements

Retired Boards Appdev Extensions
1

I’m wanting to conditionally display elements in a Checkout UI Extension if settings have been added, but if has_title or has_content_1 fails, none of the elements display.

Is this the correct way to include conditionally logic or is there another way to do it?

function App() {
  const { title, heading_1, content_1 } = useSettings();

  const has_title = title.trim() !== '';
  const has_content_1 = heading_1.trim() !== '' && content_1.trim() !== '';
  return (
    <>
      {has_title && (
        {title}
      )}

      {has_content_1 && (
        
      )}
    
  );
}
2

Hi Timd,

I’ve asked the checkouts team about this - will update here when I learn more.

1 Like
3

Hi again Timd,

Just to clarify - you want to achieve wants the following:

  • if either has_title or has_content_1 is false, no elements is displayed
  • meaning if both has_title and has_content_1 is true, elements are displayed

Is that correct?

4

Hi @Liam no it should be the opposite, if has_title is false, but has_content_1 is true only the content in has_content_1 should be shown.

At the moment, if one of the conditions returns false, none of the elements are displayed.