-
Notifications
You must be signed in to change notification settings - Fork 171
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Example of Dynamically Adding/Removing Children #13
Comments
First we setup our state data:
Then added a function to add children:
And in our render function we loop through the state:
Also if you are aiming for performance it is good to restrict the updates:
For removing (seems to only remove last item... looking into this)
|
When you delete items by removing then from SortableGrid's children, make sure you're not assigning them their key-value from map-function index, because it causes the last item to disappear instead of the intended one. |
@ollija Thank you, that is issue I was experiencing (removing only last item), however when I took off the key value when I map, only one single icon renders, instead of the 10 that should render. |
Well, you need to assign them some key. Maybe increment a number each for each item and use that as a key? |
Hrmm not sure I fully understand, Do you mean that the internal index and external should have different IDs? And thus you target this ID instead of the internal index? I am still trying to figure out best way to implement the removal and insertion (Adding to end works fine) of items. |
hello guys, i fixed it by generating random keys numbers, |
@indivisable have you solved this problem? I'm facing the same issue... |
so finally I got it working as well in updating adding children, key={Math.random() * index}. In my opinion I guess they need to add this on the documentation. |
Is there any example of how to dynamically add and remove children? If you add a child to the array do you have to re-render all of the children, or would it be best to use a state object?
The text was updated successfully, but these errors were encountered: