Apr 8, 2021
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.