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?
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.
Related
I want to add a feature to my Button component wherein I want to add an as prop just like in other component libraries to render different components based on the as value.
I am using a button to display a modal for a particular profile (different buttons for different profiles). By using a hook, the modal just renders the last profile's info. (I am mapping the profile info list)
Is there a way I can call the modal component in the mapping itself without using Hook? Or any different approach to this problem?
(P.S the code is too long, hence not pasting it in the question description)
I wired up parent and modal using another component in between, and it worked.
I created a component receiving props(containing profile info) from parent and passing it to the modal. And the modal is called from the parent via this new component.
I have created an antd table on my page. In my table rows i have given an option to edit. The edit option is basically an icon which opens up a modal with the form in it.
When the user clicks on the submit button of modal the form submits and the field is edited.
Problem
My problem is that if i manage the state globally using redux then on clicking one edit icon all the modals open up together of all the table rows.
But i dont want that.I want to create a single component of modal and pass a form as a children prop and on submission of form my modal closes.
I used CreateRef to change the state of child component but wasnt able to achieve what i want.
I think your app dependency is like this App -> Table -> Row
<Modal> should be a separate component inside App, so only single <Modal> instance can display in the whole App
In react-table, I've made a custom drop-down-menu component that appears when user clicks on a header of a column.
When user clicks on the option "Choose columns", a modal appears with checkboxes options where user can select which columns to show or hide.
This modal with the checkboxes options is in the drop-down-menu component. The problem is I can not figure out which is the best way to handle state changes. Should I keep state changes on both components (table component and drop-down-menu component)? Should I use redux for that? I'm going to use many tables, so the total number of columns will be very big. I'm really confused about all this.
You should have one source of truth. As the table will need this information, it should be saved in the table and passed to the drop-down-menu component.
Checkout this codesandbox example.
Well if you want to make your checkbox reusable component, which you should, then you will have to keep the state in your checkbox component and expect an onChange event handler from wherever you want to use that checkbox component.
My page is composed of hierarchy of classes and many reusable components. Multiple instances of a button component can exist anywhere in the page and on click they fire actions that populate different types of data in a common sidebar list component.
The requirement is to highlight the button that was last clicked to load the data in that sidebar list. Of course, it also means to remove highlighting from the previous button. Since these button can exist in different components, I cannot manage state in one parent component.
I am not able to find a solution in pure React. I don't want to use jQuery rather just stick to React. Note I do use Redux in the app though and would be fine with leveraging Redux state if required.
You should most definitely use Redux. You'll need to create a variable in Redux that gets updated whenever an action takes place that would require you to highlight the button on the page. Then use conditional styling for the button based on that variable.