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.
Related
I want to build a simple app like in picture attached with react js, I just cannot find the right idea of:
How to "select" photos(or item) in an application and have the "cart"-like component appear at the bottom when at least one photo/item is selected(and close and deselect all already selected photo/items) and expand the cart-like component at the bottom when clicked to show what's been already selected.
What is the best approach to this?
P.S I'm new to react with a big idea in mind xD
app's view
This question definitely needs more information, but I will try to point you in the right direction. There are hundred of ways to create the UI/functionality you are describing but here is a very generic overview;
The "items" (Img1-6) looks like a grid of ShopItem components, possibly in a CSS Grid / flexbox. Each ShopItem would probably make use of an onClick method to "do something" when it is clicked - this may involve updating a state (using the useState react hook) somewhere which tells you if a ShopItem is checked or not. It could also potentially use a callback method to do something in the parent when the items are checked.
I imagine that each ShopItem may own its own "checked" state or may update a global state (Such as Zustand or Redux) or a Context (React) when it is toggled on and off. The checked state of a ShopItem would also inform the UI of the component.
The "cart-like" component could be looking at the global state/context/callback from the item component, and could change based on its value and how many checked items there are. (Eg/ checkedItems !== 0 ? show : don't show)
This is just one way in which this UI can be built, if you would like a more specific solution, please edit your question to include code snippets and what you've already tried.
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.
I have used the following component in react,
https://www.npmjs.com/package/react-multiselect-checkboxes
I want to clear selected checkboxes because I have to recreate it with new options from another dropdown change event.
So is there any way from where I can clear selected checkboxes from parent component when another dropdown is changed
This is for react
The author of the libarary suggest that its behavior is based on react-select
Have you tried to use value prop?
see https://github.com/JedWatson/react-select#controllable-props
Additionally if you want to manipulate values in parent component you should use onChange callback then and store it somewhere (I assume state will be best place)
We've been using redux-form and seeing a noticeable lag when user types in an input field. I'm not really sure if it's a problem with redux-form. This could probably be the way we've structured our components. So we have page which lists some data, say 25 rows and filters for it. On click of a button, we open a modal where we render a redux-form. Now if user types in any of the input field, all the list items in the underlying page also get re-rendered. We're using React.Component for list items. React devtool's "Highlight updates" option highlights list items but when I do a console.log in list item's render method, it's not printing!
Wonder if this is happening because the list item's parent component is also a (redux) connected component and when redux-form's Field updates the store, this also gets re-rendered? How do you use redux-form in such scenario? I don't think having multiple stores is a recommended way.
I'm guessing you have an event listener for when any of the inputs on the form changes, and then you do some fetching/filtering on the underlying list?
Running this when typing quickly could lead to a performance hit, depending on what your event listener does. You could try using something like lodash.debounce to only run your listener after the user has stopped typing for like 200ms?
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.