ReactJs issues with setstate on array in ChartJs

Question

Very weird issue I am having working with react-chart-js 2, I have two fiddles to clearly demonstrate this problem. Basically I am using axios to pull API data to create my charts, when I click on a table header (the name or number header) to sort the data, the chart column data messes up and fails to work properly. However If I use basic dummy data on the componentDidMount function such as [1,2,3,4] then the sorting of the charts works exactly as expected. Why is this happening.

Fiddle 1 (with correct componentDidMount data and sorting causing issues)

https://codesandbox.io/s/confident-tdd-bj0sr

Fiddle 2 (dummy data and sorting works as expected

https://codesandbox.io/s/laughing-williams-in5ei

tbauer428 · Accepted Answer · 2019-07-10 19:13:47Z

1

I believe the issue is how you are keying your element in your render() method.

You have:

  {this.state.data.map((n, index) => {
          return (
            <tr key={index}>
              <td component="th" scope="row">
                {n.market_cap_rank}
              </td>
              <td> {n.name} </td>

I played around with your JSFiddle and found that keying it out to the data elements id (n.id) causes the filters to behave as expected.

I changed it like below (notice the key on the first element):

{this.state.data.map((n, index) => {
          return (
            <tr key={n.id}>
              <td component="th" scope="row">
                {n.market_cap_rank}
              </td>
              <td> {n.name} </td>

Here is a link to my fork of your JSFiddle https://codesandbox.io/s/intelligent-violet-6ixcm

Bear in mind that this does not retain that admittedly very slick transition on the line graphs, but this should hopefully point you in a good direction.

answered Jul 10, 2019 at 19:13

tbauer428

736 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tbauer428 Over a year ago

Anytime Shane! Happy coding!

Collectives™ on Stack Overflow

ReactJs issues with setstate on array in ChartJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related