I need data to change (as per user interaction) but (I think) setState is resetting it back

JavaScript
1

I think I’m going in circles in order to fix 2 related problems:

  1. I want something to load to page while data is being loaded up
  2. I want that data to change as user interacts with chart

I understand the basic premise that anytime state changes, React will re-render the component.

However, I have an event handler that sets some data and returns it. Then ANOTHER event uses that data in setState().

My problem - I think - is that when the first event runs (after user interacts with chart), it changes the data (as expected) but either the 2nd event is not running at all (my guess) OR it’s running but resetting the data back to original state.

Can someone help me figure out what I’m doing wrong? https://codesandbox.io/s/my-app-edhyq

How to replicate problem:

  1. Drag shaded bar across red area chart.
  2. For now, this action will filter on the date column to be “2016-7-2”.
    Expected: bar charts should all “see” the new date and change accordingly
    Actual: nothing on bar charts change.

You can ignore the bottom-right hand chart. It’s got other issues.

Thanks!

1 Like
2

I notice you have an error showing in the console. Does that have anything to do with your issue?

3

I think that has to do with from Victory library. These labels are not crucial to the logic I am trying to fix here. But just to double check (and since I am not super familiar with the Victory library yet), I commented them out and the error went away but I am still not getting the updated data that I need. So I think I’m back at square one.

1 Like
4

Fixed by putting setState in the event that is triggered by the user action. Rather than simply setting new variable in the triggered event but trying to setState somewhere else (in another event that I thought had to have ALL the setState logic…??)

1 Like
5