Javascript – Easier way to enable styling based on component attributes being present or not

Problem:

To explain what I’m currently doing with this React Native component, I am hiding certain elements if ‘options’ is present on the Container_Menu_Header within my Screen. (adding or removing header options).

Everything below is working fine, but I am interested in getting the same functionality written with less code. There must be an easier way to remove or add the styles.hide styling when the Container_Menu_Header has an options attribute present.

import React from "react";
import { StyleSheet, ImageBackground, Text } from "react-native";

import colors from "../../config/colors";
import fonts from "../../config/fonts";

import Frame_Menu_Header from "../../components/Frame_Menu_Header";
import Frame_Icon from "../../components/Frame_Icon";

function Container_Menu_Header({ title, options }) {
  return (
    <Frame_Menu_Header>
      {options ? (
        <Frame_Icon top_left_menu={[styles.top_left_menu_frame_icon]}>
          <ImageBackground
            style={styles.icon}
            source={require("../../assets/_UI/Icon_Symbol_Checkmark.svg")}
          ></ImageBackground>
        </Frame_Icon>
      ) : (
        <Frame_Icon
          top_left_menu={[styles.top_left_menu_frame_icon, styles.hide]}
        >
          <ImageBackground
            style={styles.icon}
            source={require("../../assets/_UI/Icon_Symbol_Checkmark.svg")}
          ></ImageBackground>
        </Frame_Icon>
      )}
      <Text style={[styles.text, styles.h1, styles.menu_title]}>{title}</Text>
      {options ? (
        <Frame_Icon top_right_menu={[styles.top_right_menu_frame_icon]}>
          <ImageBackground
            style={[styles.icon, { height: 12 }]}
            source={require("../../assets/_UI/Icon_Symbol_Arrow.svg")}
          ></ImageBackground>
        </Frame_Icon>
      ) : (
        <Frame_Icon
          top_right_menu={[styles.top_right_menu_frame_icon, styles.hide]}
        >
          <ImageBackground
            style={[styles.icon, { height: 12 }]}
            source={require("../../assets/_UI/Icon_Symbol_Arrow.svg")}
          ></ImageBackground>
        </Frame_Icon>
      )}
    </Frame_Menu_Header>
  );
}

const styles = StyleSheet.create({
  Container_Menu_Header: {},
  menu_title: {
    marginTop: 10,
  },
  top_left_menu_frame_icon: {
    marginLeft: 8,
    marginTop: 9,
  },
  top_right_menu_frame_icon: {
    marginRight: 8,
    marginTop: 9,
  },
  text: {
    fontFamily: fonts.primary,
  },
  h1: {
    fontSize: fonts.h1,
    lineHeight: 16,
  },
  icon: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: 16,
    height: 16,
    marginBottom: 1,
  },
  hide: {
    opacity: 0,
  },
});

export default Container_Menu_Header;

Solution:

If you just want to remove or add styles.hide styling, you can check options inside top_left_menu like this:

function Container_Menu_Header({ title, options }) {
  return (
    <Frame_Menu_Header>
      <Frame_Icon
        top_left_menu={[
          styles.top_left_menu_frame_icon,
          options ? {} : styles.hide,
        ]}
      >
        <ImageBackground
          style={styles.icon}
          source={require("../../assets/_UI/Icon_Symbol_Checkmark.svg")}
        ></ImageBackground>
      </Frame_Icon>
      <Text style={[styles.text, styles.h1, styles.menu_title]}>{title}</Text>
      <Frame_Icon
        top_right_menu={[
          styles.top_right_menu_frame_icon,
          options ? {} : styles.hide,
        ]}
      >
        <ImageBackground
          style={[styles.icon, { height: 12 }]}
          source={require("../../assets/_UI/Icon_Symbol_Arrow.svg")}
        ></ImageBackground>
      </Frame_Icon>
    </Frame_Menu_Header>
  );
}
``