Excelent question. Let me show how you can avoid branching logic in the parent component

export default function App = () =>{

const user = {}

const userByTypes = {

'admin' : <Admin /> ,

'superadmin' : <SuperAdmin />

}

return <>

{userByTypes[`${user.type}`]}

</>

}

Now you can argue We still have to add new code whenever we add a new type of user. And that's true. Because You can't avoid if-else 100%.

So why should we go in this route then?

The answer is for excapsulating related logic in the same component and extend the functionality easily.

I hope you understand my point.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store