i am new to react programming and typescript. i am currently tying to add an icon with text in a react table cell.

below is what i am trying to achieve.

as seen from above i want to render the second column with icon and text.

these text1, not-applicable and text2 values are in variable named output got from backend.

• now when output is “text2” we display text2 without any icon
• when output is “text1” and boolean variable named isAvailable is true we show triangle icon with text1
• when output is “text1” and boolean variable named isAvaiable is false we show oval icon with text1
• when output is “not-applicable” we show rectangle icon

below is my code,

return (
    <>
      {output === 'not-applicable' && 
          <>
              <Icon
                  name='square'
              />
              <span>{output}</span>
           </>
      }
      {(isAvailable && output === 'text1') && 
          <>
              <Icon
                  name='triangle'
              />
              <span>{output}</span>
          </>
      }
      {(!isAvailable && output === 'text1') && 
          <>
              <Icon
                  name='triangle'
              />
              <span>{output}</span>
          </>
      }
      {output === 'text2' && <span>{output}</span>}
    </>
);

the above code works.

but i want to have a cleaner solution. here i am repeating code. is there a way to rewrite this better. thanks.