first I should mention that I'm very new to react so this might be something silly..
I've struggled to get ReactTable's column to be sortable with the help of mattlockyer's gist
What I don't understand is I call setState on columns and then the render call is triggered correctly but it doesn't update the layout.
The render function "columns" contains an updated object with the correct column order, however render does not change the column order nor does sorting columns content.
This is the code in question,
this.setState({
columns: newColLayout,
}, () => {
this.mountEvents();
});
It will trigger a render, but the columns stay the same.
Ive put together a codepen with my current work and with comments about the code in question.
Any help would be greatly appreciated.
OK so i think i figured out whats going on.
The issue is splice modifies the state without triggering a change event, then when the event is fired from setStat, react doesn't see the change made to the column layout as it matches the current value.
The way i get around this is by cloning the column array using slice.
// Clone the current column state.
const columnClone = this.state.columns.slice(0);
// Remove item from array and stick it in a new position.
columnClone.splice(i, 0, columnClone.splice(this.draggedCol, 1)[0]);
Here is the updated code...
Still might be improved by someone who has more experience with react.
Related
I can't seem to figure out how to delete a slide at the current index which is rendered from an array using Swiper.js. Code Sandbox link here.
I have tried:
function deleteSlide() {
swiper.current.swiper.removeSlide(currentIndex);
var temp = slides;
temp.splice(currentIndex, 1);
setSlides(temp);
}
But the problem is that it does a double delete when the state updates. If I only run removeSlide, it removes the slide but my array is not updated. If I do anything else, my array updates but the slides don't update until I do a swipe. Adding slides to the end of the array so far works fine.
Without explicitly calling removeSlide, I tried the following:
useEffect(() => {
swiper.current.swiper.update();
}, [slides]);
But I'm not quite sure why this isn't actually updating the Swiper instance, according to the docs that's what I believe it should be doing. I recognize that this isn't being called when the state updates in deleteSlide either, and I'm not entirely sure why.
The ideal behavior is that the current view stays put, and when the current slide is deleted, the slide at index + 1 slides into position. If you delete the very last slide, then you slide to the 2nd last slide and the last slide gets deleted. I can take care of this as long as I can actually update the Swiper instance correctly.
How should I go about this? Appreciate any help, thank you.
Managed to solve this:
function deleteSlide() {
var temp = [...slides];
temp.splice(currentIndex, 1);
setSlides(temp);
}
Just had to use the spread ... operator to copy the array correctly. Although it is worth noting that this resets the state for all the other rendered slides, I need to figure out how to fix that.
EDIT: Updated Code Sandbox. To prevent re-rendering of all other array elements, the key of each element must be unique across renders. Fixed by setting the key to be a count, which is strictly increasing.
Looks like React DnD expects draggable/droppable items to be siblings in order to work properly. If one of the items belongs to another parent I get "Expected to find a valid target." as soon as the drag over event fires (when the swap should trigger).
I tweaked an example from their docs in case anyone would like to try it out:
broken example: https://codesandbox.io/s/broken-feather-qf0f2?file=/src/Container.jsx
Tweaks are at the bottom. Note that the first card item is rendered separately from the remaining ones, in another div.
In order to trigger the error just drag & drop the first item into another one. Notice that if you drag & drop any other items they will work.
original example: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple?from-embed=&file=/src/Container.jsx
Thank you!
Could be an issue with react-dnd.
Check out this issue https://github.com/react-dnd/react-dnd/issues/361
From the issue that I had, the hover handler was updating the table/grid too fast. It was setting the state of the items and I guess DnD applies a new target id, hence the error.
Try adding a debounce on the hover handler with trailing option set to true. The problem is that the component is updating too quickly and the target id that DnD is expecting, has already changed due to the state change. It may help to add some checks in there to make sure that the item is droppable as well.
Due to #DDT's answer, I managed to solve the problem I was experiencing.
In the useDrop function I was updating the table/grid too fast after the update function from immutability-helper.
So I added a state variable e.g. wasDragDropped with an useEffect hook on it.
I change the wasDragDropped variable when useDrag is finished, and then update the table/grid via functionality in the useEffect hook.
(using react-dnd 14.0.4 and react-dnd-html5-backend 14.0.2)
I am implementing a react-table component containing server-side pagination and I need sorting on the columns as well.
However I am observing strange behaviors. When I am using only pagination and click on next page the pageIndex is getting incremented.
However when I add sorting hooks then then pagination in not working. The pageIndex is getting back to 1 automatically and I am not able to figure it why.
Can any one help me out. Below is sandbox link https://codesandbox.io/s/eager-breeze-9cw0r.
When making changes to the external data you want to disable automatic resets to the state of the table (see https://react-table.js.org/faq#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes for more info). So in your case changing the page modifies the data you're passing to the table, which leads to the state of the table being reset.
In order to stop this you need to set autoResetPage to false. Eg:
useTable<FormattedRowData<T>>(
{
autoResetPage: false
});
I made the change to your sandbox and this resolved the issue.
I have created the following demo to help me describe my question: https://codesandbox.io/s/dazzling-https-6ztj2
I have a form where I submit information and store it in a database. On another page, I retrieve this data, and set the checked property for the checkbox accordingly. This part works, in the demo this is represented by the dataFromAPI variable.
Now, the problem is that when I'd like to update the checkboxes, I get all sorts of errors and I don't know how to solve this. The ultimate goal is that I modify the form (either uncheck a checked box or vice versa) and send it off to the database - essentially this is an UPDATE operation, but again that's not visible in the demo.
Any suggestions?
Also note that I have simplified the demo, in the real app I'm working on I have multiple form elements and multiple values in the state.
I recommend you to work with an array of all the id's or whatever you want it to be your list's keys and "map" on the array like here https://reactjs.org/docs/lists-and-keys.html.
It also helps you to control each checkbox element as an item.
Neither your add or delete will work as it is.
Array.push returns the length of the new array, not the new array.
Array.splice returns a new array of the deleted items. And it mutates the original which you shouldn't do. We'll use filter instead.
Change your state setter to this:
// Since we are using the updater form of setState now, we need to persist the event.
e.persist();
setQuestion(prev => ({
...prev,
[e.target.name]: prev.topics.includes(e.target.value)
// Return false to remove the part of the array we don't want anymore
? prev.topics.filter((value) => value != e.target.value)
// Create a new array instead of mutating state
: [...prev.topics, e.target.value]
}));
As regard your example in the codesandbox you can get the expected result using the following snippet
//the idea here is if it exists then remove it otherwise add it to the array.
const handleChange = e => {
let x = data.topics.includes(e.target.value) ? data.topics.filter(item => item !== e.target.value): [...data.topics, e.target.value]
setQuestion({topics:x})
};
So you can get the idea and implement it in your actual application.
I noticed the problem with your code was that you changed the nature of question stored in state which makes it difficult to get the attribute topics when next react re-renders Also you were directly mutating the state. its best to alway use functional array manipulating methods are free from side effects like map, filter and reduce where possible.
I am trying to understand how React works with the new Hooks implementation. In this example, I want the browsers to render selected items as I click on the rendered options. But as you can see, it doesn't work.
Here is the example: https://codesandbox.io/s/pjorxzyrx7
Do I have to use the useEffect in this case? Also, as I understand, useEffect couldn't render anything and only return functions. So, what am I missing here?
Thank you!
You're currently mutating the contents of the selected array instead of replacing it. React can't detect a state change when you do this.
Try something like the following:
const handleSelected = item => {
console.log(item);
console.log(selected);
setSelected([...selected, item]);
};
When updating arrays or objects as a part of a state, always make a new copy to assign so that React can properly know when to re-render.
Also, include relevant parts of your code directly in the question in the future, instead of hiding it behind a link (although including a runnable example is great!)