How to remove the repetitive code with a function in ReactJS

Question

I have the below code written in my project, I want to remove the repetitive code for different view port with a function. Can someone please help me out how I can do that. All the different view ports are used to make the component responsive with different breakpoints of different devices.

    import * as React from 'react';
    import { ViewExtraLarge, ViewLarge, ViewMedium, Viewport, ViewSmall } from '@shared-ui/viewport-context';
    import { UitkDialogContent, UitkFullscreenDialog } from 'uitk-react-dialog';
    import { ToolbarType, UitkToolbar } from 'uitk-react-toolbar';
    
    export interface SeatMapDialogProps {
      onCloseCB?: () => void;
      shouoldDialogShow?: boolean;
      header?: string;
      iconLabel?: string;
      onOpenCB?: () => void;
      shouldReturnFocusOnClose?: boolean;
      isStrictFullscreen?: boolean;
      isWideContent?: boolean;
    }
    
    export const SeatMapDialog: React.FC<SeatMapDialogProps> = (props) => {
      const { onCloseCB, shouoldDialogShow, header, iconLabel, onOpenCB, shouldReturnFocusOnClose, isStrictFullscreen } = props;
    
    ```
    return (
    <>
      <UitkFullscreenDialog
        dialogShow={shouoldDialogShow}
        strictFullscreen={isStrictFullscreen}
        returnFocusOnClose={shouldReturnFocusOnClose}
        openCallback={onOpenCB}
        closeCallback={onCloseCB}
      >
        <UitkToolbar action={onCloseCB} header={header} iconLabel={iconLabel} />

        <UitkDialogContent key="UitkDialogContent-1" className="UitkSeatmapDialogContent">
          <div key="UitkComponenetWrapper">
            <Viewport>
              <ViewSmall>
                <>
                  <div>LegendDropDown</div>
                  <div>Seatmap</div>
                </>
              </ViewSmall>
              <ViewMedium>
                <>
                  <div>LegendDropDown</div>
                  <div>Seatmap</div>
                </>
              </ViewMedium>
              <ViewLarge>
                <>
                  <div>
                    <div>LegendDropDown</div>
                    <div>LegendSheet</div>
                  </div>
                  <div>Seatmap</div>
                </>
              </ViewLarge>
              <ViewExtraLarge>
                <>
                  <div>
                    <div>LegendDropDown</div>
                    <div>LegendSheet</div>
                  </div>
                  <div>Seatmap</div>
                </>
              </ViewExtraLarge>
            </Viewport>
          </div>
        </UitkDialogContent>
      </UitkFullscreenDialog>
    </>
  );
};
    ```

Answer 1

you can simply extract it into a function and use it in your return jsx

...
const renderLegend = (showLegendSheet: boolean) => <>
  <div>
    <div>LegendDropDown</div>
    {showLegendSheet ? <div>LegendSheet</div> : <></>}
  </div>
  <div>Seatmap</div>
</>

return (
<>
  <UitkFullscreenDialog
    dialogShow={shouoldDialogShow}
    strictFullscreen={isStrictFullscreen}
    returnFocusOnClose={shouldReturnFocusOnClose}
    openCallback={onOpenCB}
    closeCallback={onCloseCB}
  >
    <UitkToolbar action={onCloseCB} header={header} iconLabel={iconLabel} />

    <UitkDialogContent key="UitkDialogContent-1" className="UitkSeatmapDialogContent">
      <div key="UitkComponenetWrapper">
        <Viewport>
          <ViewSmall>
            {renderLegend()}
          </ViewSmall>
          <ViewMedium>
            {renderLegend()}
          </ViewMedium>
          <ViewLarge>
            {renderLegend(true)}
          </ViewLarge>
          <ViewExtraLarge>
            {renderLegend(true)}
          </ViewExtraLarge>
        </Viewport>
      </div>
    </UitkDialogContent>
  </UitkFullscreenDialog>
</>

I would also recommend extracting your legends into a separate components but since your example is so simplistic function like renderLegend should do