Conditionally rendering part of component in elixir

I am new to elixir and having trouble rendering this component in a DRY way. I have this CardHeader component:

    <CardHeader
      :if={{ not is_nil(@truck_load.sand_type) }}
      background_color={{ @truck_load.sand_type_background_color }}
      text_color={{ @truck_load.sand_type_text_color }}
      title={{ @truck_load.sand_type }}
      :if={{ not is_nil(@truck_load.measured_weight) }}
      info={{"#{@truck_load.measured_weight} lb (#{
      Weight.convert_pounds_to_tons_and_round(@truck_load.measured_weight, 2)
      } tons)"}}
    />

that may or may not have a @truck_load.measured_weight value. If it does, I want the info variable to be set to its value, with string interpolation to show the units of measurement. If there is no @truck_load.measured_weight value, I don’t want the units of measurement to appear, so I want info to be set to an empty string.

I can’t figure out how to get this to work without having a separate CardHeader component that checks if @truck_load.measured_weight is nil like so:

<CardHeader
          :if={{ not is_nil(@truck_load.sand_type) }}
          background_color={{ @truck_load.sand_type_background_color }}
          text_color={{ @truck_load.sand_type_text_color }}
          title={{ @truck_load.sand_type }}
          :if={{ is_nil(@truck_load.measured_weight) }}
          info=""
        />

Is there a better, DRYer way to do this?

Thanks!!

I would move the logic that computes the value of the info prop in a helper:

<CardHeader
  ...
  info={{ render_measured_weight_info(@truck_load.measured_weight) }}
  ...
/>
defp render_measured_weight_info(nil), do: ""
defp render_measured_weight_info(weight) do
  ...
end
2 Likes

You might also mention You are using Surface :slight_smile:

1 Like

wow this seems like such an obvious fix now lol, I tried it and it did the trick, thanks so much!!

so to be completely honest I’m working with an old codebase thats completely new and I didn’t even know they were using Surface, so thanks for pointing this out!