Mobx and d3 Stacked Bar in React

Question

https://codesandbox.io/s/charming-ives-3jnnn

As per the codesandbox linked, I have a bar chart that counts tracks over a month from 4 different sensors. I followed this tutorial: https://github.com/muratkemaldar/using-react-hooks-with-d3/tree/15-stacked-bar-chart which worked fine. Now I have converted a lot of my code to use mobx, yet I am struggling to get this to work. I left it to use useState but it seems to want to refresh all the time. How do I code the 'onChange' portion?

                    onChange={(e) => {
                      if (e.target.checked) {
                        setKeys(Array.from(new Set([...keys, key])));
                      } else {
                        setKeys(keys.filter((_key) => _key !== key));
                      }

Danila · Accepted Answer · 2020-12-09T08:11:41.710

0

So, setKeys in the store should look like that, not that it is not an arrow function:

      setKeys(key, checked) {
        if (checked) {
          this.keys = Array.from(new Set([...this.keys, key]));
        } else {
          this.keys = this.keys.filter((_key) => _key !== key);
        }
      }

And you use it like that:

    onChange={(e) => {
        store.setKeys(key, e.target.checked);
    }}

Codesandbox: https://codesandbox.io/s/httpsstackoverflowcomquestions65207564-0odbx?file=/src/App.js:1657-1758

edited Dec 09 '20 at 08:11

answered Dec 09 '20 at 07:34

Danila

15,606
2
35
67

Sweet, it works as intended but now the refresh of the graph is not as it should be. Each click doesn't erase the previous and just draws on top. – rvz Dec 09 '20 at 19:59

Mobx and d3 Stacked Bar in React

1 Answers1