How can I implement this React Native component without relying on a conditional statement?

Question

I have a component, it's actually an entire screen in my application. This screen/component renders multiple other components. However, what it renders is conditional. Currently, I have an if statement, which decides which markup is returned. The only differences between the two markups is one additional <PDFPreview> component is added. I'm pretty sure this isn't the best way to go about this...

const SearchScreen = ({navigation}) => {
    const [ makeSelected, setMakeSelected ] = useState(null);
    const [ modelSelected, setModelSelected ] = useState(null);
    const [ yearSelected, setYearSelected ] = useState(null);
    const [ typeSelected, setTypeSelected ] = useState(null);

    const selectMakeHandler = newMakeData => {
        let makeId = newMakeData.id;
        setMakeSelected(makeId);
    }

    const selectModelHandler = newModelData => {
        let modelId = newModelData.id;
        setModelSelected(modelId);
    }

    const selectYearHandler = newYearData => {
        let yearId = newYearData.id;
        setYearSelected(yearId);
    }

    const selectTypeHandler = newTypeData => {
        let typeId = newTypeData.diagramTypeId;
        setTypeSelected(typeId);
    }


    if (typeSelected !== null)
    {
        return (
            <Layout style={styles.mainContainer1}>
                <Layout style={styles.pickerContainer}>
                    <MakePicker 
                    onSelectMake={selectMakeHandler}
                    />
                    <ModelPicker 
                    onSelectModel={selectModelHandler}
                    makeId={makeSelected}
                    />
                    <YearPicker 
                    makeId={makeSelected}
                    modelId={modelSelected}
                    onSelectYear={selectYearHandler}
                    />            
                    <DiagramTypePicker
                    makeId={makeSelected}
                    modelId={modelSelected}
                    modelYearId={yearSelected}
                    onSelectType={selectTypeHandler}
                    />
                    <Layout style={styles.previewContainer}>
                        <PdfPreview
                        makeId={makeSelected}
                        modelId={modelSelected}
                        modelYearId={yearSelected}
                        typeId={typeSelected}
                        />
                    </Layout>
                    <Layout style={styles.btnContainer}>
                        <Button 
                        onPress={() => navigation.navigate('Pdf')}
                        >
                        Download
                        </Button>
                    </Layout>
                </Layout>
                <Layout style={styles.adContainer}>
                    <Advertisement/>
                </Layout>
            </Layout>
        )
    } 
    else 
    {
        return (
            <Layout style={styles.mainContainer2}>
                <Layout style={styles.pickerContainer}>
                    <MakePicker 
                    onSelectMake={selectMakeHandler}
                    />
                    <ModelPicker 
                    makeId={makeSelected}
                    onSelectModel={selectModelHandler}
                    />
                    <YearPicker 
                    makeId={makeSelected}
                    modelId={modelSelected}
                    onSelectYear={selectYearHandler}
                    />            
                    <DiagramTypePicker
                    makeId={makeSelected}
                    modelId={modelSelected}
                    modelYearId={yearSelected}
                    onSelectType={selectTypeHandler}
                    />
                </Layout>
                <Layout style={styles.adContainer}>
                    <Advertisement/>
                </Layout>
            </Layout>
        )
    }
};

When a diagram is selected from the <DiagramTypePicker>, SearchScreen should re-render, every time, only now it should additionally render the PDF preview of the diagram type selected from <DiagramTypePicker>. If no preview is available for the diagram which was selected, I would like SearchScreen to instead show the original markup, the one without the PDF preview. I know with the useState() and useEffect() hooks I can watch the state of 'typeSelected' to control the re-render, but I'm still not sure if a huge 'if' statement with two different markups is the best way to go about this. Oh, and if the preview is unavailable the additional 'download' button would also be removed. Any advice? Comments? Questions or concerns? Thanks!

Answer 1

You can use ternary operator(?:) or logical AND(&&) operator and React Fragment to avoid this big if-else. The if-else with repetitive code violates DRY principle and should be avoided as any update to the code will be required at 2 different places which will be prone to error in case one is missed

const SearchScreen = ({ navigation }) => {
  ...
  return (
    <Layout style={typeSelected !== null ? styles.mainContainer1 : styles.mainContainer2}>
      <Layout style={styles.pickerContainer}>
        <MakePicker
          onSelectMake={selectMakeHandler}
        />
        <ModelPicker
          onSelectModel={selectModelHandler}
          makeId={makeSelected}
        />
        <YearPicker
          makeId={makeSelected}
          modelId={modelSelected}
          onSelectYear={selectYearHandler}
        />
        <DiagramTypePicker
          makeId={makeSelected}
          modelId={modelSelected}
          modelYearId={yearSelected}
          onSelectType={selectTypeHandler}
        />
        {typeSelected !== null &&
          <>
            <Layout style={styles.previewContainer}>
              <PdfPreview
                makeId={makeSelected}
                modelId={modelSelected}
                modelYearId={yearSelected}
                typeId={typeSelected}
              />
            </Layout>
            <Layout style={styles.btnContainer}>
              <Button
                onPress={() => navigation.navigate('Pdf')}
              >
                Download
                </Button>
            </Layout>
          </>
        }
      </Layout>
      <Layout style={styles.adContainer}>
        <Advertisement />
      </Layout>
    </Layout>
  )
};

Ternary Operator can be used as:

{typeSelected !== null
  ? <>
    <Layout style={styles.previewContainer}>
      <PdfPreview
        makeId={makeSelected}
        modelId={modelSelected}
        modelYearId={yearSelected}
        typeId={typeSelected}
      />
    </Layout>
    <Layout style={styles.btnContainer}>
      <Button
        onPress={() => navigation.navigate('Pdf')}
      >
        Download
        </Button>
    </Layout>
  </>
  : null
}

Note:

• <></> is short for React.Fragment
• Please try to use logical && in these cases for better readability purposes.

Hope it helps. Revert for any doubts