This might simple but I need some pointers.
I have a list of items which I am rendering using map list (Parent Component) and item(Child Component).
There is checkbox inside child component
Parent has a button
Now, I want user should able to select few or all items from the list, and on click of button we should highlight the checked items alone.
I tried some flag passing, however could not figure out best approach.
Please suggest.
Thanks all.
Finally, figured out by adding operation code in parent component.
Child component just get status update in case.
Related
I'm using a Material UI table and trying to expand the TableRow inside collapse table but I have a problem. Currently, my list all have collapses but they are linked to one state for "open" so if I open one list, all the other lists open.
What is the best way to keep the collapses separate from each other without having a lot of states for each list.
Please check the code here:
https://codesandbox.io/s/collapsetable-2wp59
What am I doing wrong? Could you show me how to do it?
Just move a row with Collapse into separate component and handle open/close logic inside.
Thus every row will have own open state and update function.
Here is your updated example: https://codesandbox.io/s/collapsetable-forked-kj8v6
I have a prefab object that has many children. I highlight any "One" of these children and change its color. I am selecting another child of the same prefab and highlight it by changing its color but at the same time I want the previous child to deselect or change back to its original color.
The highlight and change color are not the problem, I am struggling to see if I need to store the children in an array and then loop through the objects to see if they have been selected and if so then change back or... this is where I am stuck. Any ideas, tips, recommendations?
Here's a link!
This link helped, I had everything in the OnMouseDown checking but never updating. So, if anyone checks this out it could help with the same question I posted.
here is my problem.
I am using react-window to render large tables. Each row has its own local state. After I delete a row, the next row moves up and gains the state of the deleted row (this how it looks in my app).
Is there a workaround for this problem? Can i have local state for each row with react-window?
codesandbox example | gif how it works
There is a fundamental issue here - react-window will dynamically render, unmount and rerender components. So if you want data persisted across re-renders - you must pass the count via props and a function to change it. Store the data with the item data itself.
I will try and show a working demo of that soon ,but look at this to understand yet another problem happening with this code: https://codesandbox.io/s/react-window-row-state-problem-mmukt
I have edited the size to be 150 instead of 50, this leads to the window getting a scrollbar. Now, try and click on "two" multiple times. This will increase the count. Next, scroll to bottom and go back up. You'll see that the count is lost.
This is because of the way react-window mounts and unmounts components.
To fix this in your original code, I made the following modifications:
1. Move count/active state to parent.
2. Pass the updateCount function to TableRow.
Essentially, the TableRow is now a pure component :)
Here is the link: https://codesandbox.io/s/react-window-row-state-problem-uzsdl
Hope this helps.
In a nutshell, you can't. The issue is that, when you delete an item, the same component that was used previously for it will be used to render the item after it (so if you delete the 2nd item, the 3rd item will use the Row from the old 2nd element). It will maintain that item's state. If you add a useEffect to detect that the item changed, then you break everything after it (since everything is bumped up one, all of the items after the deleted item will reset their state. You don't have access to the sibling component's state, so you have no way to propagate the state.
You have a few options here:
Add the selection to the properties of the item, and provide a way to update the item.
Make the selection state part of the App component's state, and pass it down to the component so it can render appropriately.
I'll also add that you probably don't want to map over your presumably large list of items every render like you are now. It looks like you are doing this to expose deleteItems. I would recommend something more like this:
<FixedSizeList
height={500}
width={300}
itemCount={items.length}
itemSize={50}
itemData={{items, deleteItem}}
>
{Row}
</FixedSizeList>
Then your Row component's data will have both the items array and the deleteItem function. If you maintain your selected rows state in App, you easily extend this to pass the selected state and modification functions down to your Row component.
I have an inherited React app that i need to fix but after a few days, im stuck and need help.
I have a filtering panel on the left side which contains a 5 categories and items within their categories below it, each item has a checkbox next to it and when you click it, it updates the results on the right side, this works fine.
However i have a task to update the numbers next to the links in the filter panel, based on what was clicked and would like to know if there is a way to create the filters links first and then only update the number next to the link upon click.
All the code resides in the render method, any help would be great.
I am working with material-ui and React. I have a SelectField that is part of a component which is a grandchild of the parent component. What I need is to take the value of the item in the SelectField and then use that to display information in another SelectField which is a child of this component so a great grandchild of the parent component if you will.
I need to use the value I get from the first SelectField to make an API request to get the info that I need to show in the next SelectField.
I can successfully get the value from the first SelectField but I am struggling to figure how I can get it to show in the child component.
If you could help me out I would appreciate it.
Thanks for your time
Put the value of your two fields in a state and fill your select fields with thoses values. Create a callback that will call this.setState() to modify the value of the second field when the first one is modified. Attach this callback on yout first field with the property onChange. As a result, the second select field will have a new value. you have an example here
To fix this, I created an array and when I select the value from the first SelectField I updated the state of the array with the values that I wanted to populate the next SelectField with and passed it back from the parent component as props.