Conditionally display elements

[timd]

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 && (
        <Text emphasis="bold">{title}</Text>
      )}

      {has_content_1 && (
        <View border="none" padding="base">
          <Text emphasis="bold">{heading_1}</Text>
          <TextBlock>
            {content_1}
          </TextBlock>
        </View>
      )}
    </>
  );
}

[Liam]

Hi Timd,

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

[Liam]

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?

[timd]

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.