Render a new component onClick without using conditional rendering or react-router

Question

Here is what I am trying to achieve. I have an MUI table that contains a list of data (say student names) and it is a Functional Component. When a user clicks on any of the items in the table, it should load the details of the student clicked in a card or a box. (MUI components). The card has a back button that loads back the same table when clicked. I'm not sure how to achieve it without using react-router or without using conditional rendering.

The doubt that I have is, do we need to hide the details component in render from the main page, till it's clicked on? Like the whole tree needs to carry this component from MainPage(Hide)-> Table(hide) -> Student details(display it on click). Do I need to hide it from the main component render and only change the prop onClick in the table component? I'm not sure if we have a better approach, where I can directly call it in the table component?

Answer 1

You can use custom MUI Modal component to load the details to achieve your requirement without the need of react-router.

And to toggle the Modal, you can use onClick handler on MUI TableRow. TableRow doesn't have onClick prop, but the underlying component is React's tr by default, which accepts onClick.