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

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
>
</Button>
</Layout>
</Layout>
</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>
</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!

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
>
</Button>
</Layout>
</>
}
</Layout>
</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
>

• <></> is short for React.Fragment