reactjs - Conditional styling based on whenever there is a certain field value added by cms in React/Typescript app

Question

In my React/Typescript component I render a <Link /> component whenever the value (data.link?.text and data?.link?.url) is added by the CMS.

{data.link?.text && data?.link?.url && (
 <Link to={data?.link?.url}>
)}

I use Typescript Optional Chaining to conditionally render the Link or not. So if the text and url of the link field are filled it renders the <Link /> component.

The Link type:

export type Link = {
 link: {
   url: string;
   text: string;
 };
}

If the Link component doesn't exist on the page/isn't rendered I want to add some styling (margin-bottom) to the List component.

The structure of the component looks like this:

<List>
 <div css={styles.list}>
  // Mapped list items here
 </div>
</List>

{data.link?.text && data?.link?.url && (
 <Link css={styles.link} to={data?.link?.url}>
  {data.link.text}
 </Link>
)}

So somehow I have to create a boolean and based on that boolean, in my MyComponent.styles.ts I can do something like:

margin-bottom: ${haslink ? `0` : `35px`}; 

question from:https://stackoverflow.com/questions/65868865/conditional-styling-based-on-whenever-there-is-a-certain-field-value-added-by-cm

Answer 1

I think you could create a div with the extra margin bottom that you can conditionally render based on the link url.

<List>
  <div css={styles.list}>
    // Mapped list items here
  </div>
</List>

{data.link?.text && data?.link?.url ? (
  <Link css={styles.link} to={data.link.url}>
    {data.link.text}
  </Link>
) : (
  <div style={{ marginBottom: '35px' }} /> // <-- adjust how you style this element as needed
)}