[Chartjs]-ReactJs issues with setstate on array in ChartJs

by

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.

Leave a comment