react native in line conditional rendering null value

Question

I want to conditionally render the make call button inline based on null value. If the Button makeCall() has a null value. I do not want it to display. If it has a string value then i want the button to display. I know it should look something like this:

{ fixMeTruthyConditionToCauseDisplay && <Button {...makeTestAttributes('contactSupport_call_button')} preset="secondary" onPress={() => makeCall(configStore.phone || '')} tx="contactSupport.call" /> }

but am not quite sure how to implement it.

full code here:

export const ContactSupport = observer(({ navigation }: StackScreenProps<AccountParamList, 'contactSupport'>) => {
  const theme = useTheme();
  const styles = makeStyles(theme);
  const { configStore } = useStores();

  const makeCall = (phone: string) => {
    const phoneLink = `tel:${phone || ''}`;
    Linking.canOpenURL(phoneLink)
      .then(() => Linking.openURL(phoneLink))
      .catch(() =>
        Alert.alert('', configStore.supportEmail ? translate('contactSupport.phoneMissingError', { supportEmail: configStore.supportEmail }) : translate('contactSupport.emailAndPhoneMissingError')),
      );
  };

  const sendEmail = (to: string) => {
    if (!to) {
      if (configStore.phone) {
        Alert.alert('', translate('contactSupport.emailMissingError', { supportPhone: configStore.phone || '' }));
      } else {
        Alert.alert('', translate('contactSupport.emailAndPhoneMissingError'));
      }
    } else {
      const emailLink = `mailto:${to}`;

      Linking.canOpenURL(emailLink)
        .then(() => Linking.openURL(emailLink))
        .catch(() => Alert.alert('', translate('contactSupport.emailClientError', { supportEmail: configStore.supportEmail || '' })));
    }
  }; 

return (
<Screen
  {...makeTestAttributes('contactSupport')}
  header={<Header headerTx="contactSupport.header" leftButtons={[{ preset: 'back', onPress: () => navigation.goBack() }]} />}
  footer={
    <>
      <Button {...makeTestAttributes('contactSupport_call_button')} preset="secondary" onPress={() => makeCall(configStore.phone || '')} tx="contactSupport.call" />
      <Button onPress={() => sendEmail(configStore.supportEmail || '')} {...makeTestAttributes('contactSupport_email_button')} tx="contactSupport.email" />
    </>
  }
  preset="fixed"
  style={styles.container}
>

If you don't know when the button should be displayed how could we know? — Konrad
– Konrad, Commented Oct 20, 2022 at 17:24
It's bad practice to test for a negative condition. For string, you can use something like: if( (typeof string) && value !== null) ...blah. — Mike S.
– Mike S., Commented Oct 20, 2022 at 18:38

Amirhossein Sefati · Accepted Answer · 2022-10-20 17:37:00Z

Use configStore.phone as the condition for rendering your button. Something like this should work:

export const ContactSupport = observer(({ navigation }: StackScreenProps<AccountParamList, 'contactSupport'>) => {
  const theme = useTheme();
  const styles = makeStyles(theme);
  const { configStore } = useStores();

  const makeCall = (phone: string) => {
    const phoneLink = `tel:${phone || ''}`;
    Linking.canOpenURL(phoneLink)
      .then(() => Linking.openURL(phoneLink))
      .catch(() =>
        Alert.alert('', configStore.supportEmail ? translate('contactSupport.phoneMissingError', { supportEmail: configStore.supportEmail }) : translate('contactSupport.emailAndPhoneMissingError')),
      );
  };

  const sendEmail = (to: string) => {
    if (!to) {
      if (configStore.phone) {
        Alert.alert('', translate('contactSupport.emailMissingError', { supportPhone: configStore.phone || '' }));
      } else {
        Alert.alert('', translate('contactSupport.emailAndPhoneMissingError'));
      }
    } else {
      const emailLink = `mailto:${to}`;

      Linking.canOpenURL(emailLink)
        .then(() => Linking.openURL(emailLink))
        .catch(() => Alert.alert('', translate('contactSupport.emailClientError', { supportEmail: configStore.supportEmail || '' })));
    }
  }; 

return (
<Screen
  {...makeTestAttributes('contactSupport')}
  header={<Header headerTx="contactSupport.header" leftButtons={[{ preset: 'back', onPress: () => navigation.goBack() }]} />}
  footer={
    <>
      {configStore.phone !== null && <Button {...makeTestAttributes('contactSupport_call_button')} preset="secondary" onPress={() => makeCall(configStore.phone || '')} tx="contactSupport.call" />}
      <Button onPress={() => sendEmail(configStore.supportEmail || '')} {...makeTestAttributes('contactSupport_email_button')} tx="contactSupport.email" />
    </>
  }
  preset="fixed"
  style={styles.container}
>

Collectives™ on Stack Overflow

react native in line conditional rendering null value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related