React-table: React Table is not rerendering after being passed new data from parent container.

[jl6871]

What version of React-Table are you using? 6.7.6

Your bug may already be fixed in the latest release. Run yarn upgrade react-table!
Place your version here...

What bug are you experiencing, or what feature are you proposing?

I am passing new data from my parent component to my child component which renders a ReactTable. When I add a new row of data to my empty array and then send this new array to my child component to render ReactTable, it works fine, however when I add another row to my array, the new row does not get rendered, eventhough the REACT table has the correct data.
// I did a functional render and this is what I get for the first row. This row shows up in my react table

STATE.DATA === [
{
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
}
]
STATE.RESOLVEDDATA === [
{
"_ORIGINAL": {
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
},
"_INDEX": 0,
"_NESTINGLEVEL": 0,
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
}
]

//After adding a second element into my data array the second row does not render howerver ReactTable has this new data.

STATE.DATA === [
{
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
},
{
"KEY": 1,
"INTERNALID": 1524,
"NAME": "AIDEN SOMERHALDER"
}
]
STATE.RESOLVEDDATA === [
{
"_ORIGINAL": {
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
},
"_INDEX": 0,
"_NESTINGLEVEL": 0,
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
}
]

//I add another element into my array. Which now I have 3 and it still does not render.

STATE.DATA === [
{
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
},
{
"KEY": 1,
"INTERNALID": 1524,
"NAME": "AIDEN SOMERHALDER"
},
{
"KEY": 2,
"INTERNALID": -5,
"NAME": "ALEX WOLFE"
}
]
STATE.RESOLVEDDATA === [
{
"_ORIGINAL": {
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
},
"_INDEX": 0,
"_NESTINGLEVEL": 0,
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
}
]

//If I navigate away from this page and come back I can see all rows but if I add another row again I cannot see it until I navigate away from the tab and go back into it.

STATE.DATA === [
{
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
},
{
"KEY": 1,
"INTERNALID": 1524,
"NAME": "AIDEN SOMERHALDER"
},
{
"KEY": 2,
"INTERNALID": -5,
"NAME": "ALEX WOLFE"
}
]
STATE.RESOLVEDDATA === [
{
"_ORIGINAL": {
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
},
"_INDEX": 0,
"_NESTINGLEVEL": 0,
"KEY": 0,
"INTERNALID": 5673,
"NAME": "ADAM MCADOO"
},
{
"_ORIGINAL": {
"KEY": 1,
"INTERNALID": 1524,
"NAME": "AIDEN SOMERHALDER"
},
"_INDEX": 1,
"_NESTINGLEVEL": 0,
"KEY": 1,
"INTERNALID": 1524,
"NAME": "AIDEN SOMERHALDER"
},
{
"_ORIGINAL": {
"KEY": 2,
"INTERNALID": -5,
"NAME": "ALEX WOLFE"
},
"_INDEX": 2,
"_NESTINGLEVEL": 0,
"KEY": 2,
"INTERNALID": -5,
"NAME": "ALEX WOLFE"
}
]

[gary-menzel]

Please provide a codesandbox.io example of how you have set up the component so it is easier to look at the flow. There is nothing that can be deduced from others looking at your data (as we would not know your data). Other questions....

How are you adding the row to your external data? Is it in Redux, MobX or in some other type of store? Any response to what could be happening would need this information and/or a mocked up example.

[gary-menzel]

Here is a Redux example: https://codesandbox.io/s/zqxl6r190l

Here is a MobX example: https://codesandbox.io/s/kkmxl8moq5

[jl6871]

Hello Gary,
Thanks for your quick response. Unfortunately I am new to using REACT that
I have not implemented any type of "stores", ie Redux, MobX or Flux(after
reading on it, I'd prefer this one). I will try to recreate this on the
codesandbox and get it to you but I don't think I will be as quick as you
to respond because I have to recreate a chunk of my work to get it working
on the sandbox. I will keep you posted.

Thanks

On Fri, Jan 12, 2018 at 4:27 AM, Gary Menzel [e-mail]
wrote:

Here is a Redux example: https://codesandbox.io/s/zqxl6r190l

Here is a MobX example: https://codesandbox.io/s/kkmxl8moq5

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/react-tools/react-table/issues/740#issuecomment-357201495,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AV_3XIL65dTdUaComVkYkAA748r0-xC8ks5tJzN_gaJpZM4Rb7cl
.

--
Jesus Losoya
281-968-1704

[gary-menzel]

You don't have to use a global store with React (or ReactTable). I only provided those as I didn't have much other information about how you were managing your data outside of the component you are using ReactTable in. These are the most common and sometimes they are difficult to wire up when people are learning React and ReactTable at the same time.

I hadn't used either of them until I embarked on those couple of examples a few months ago. I just learned enough to get the examples working (and was still fixing the MobX one this week).

[tannerlinsley]

React-Table is simple in that it detects if the object reference to the data prop has changed. This is important to understand. You cannot simply modify the data in your data array and expect it to change. At the very least, you need to immutably pass a new object to react-table to allow it to detect a change.

A simple example:

this.setState({
  data: [ ...this.state.data ]
})

Then you can pass this.state.data to your table's data prop and it will rerender.

[The-Code-Monkey]

my data is coming from my redux store but not being rerendered by react table how is this, and my data is changing as i can see it changing in redux logger

[mitrosunay]

im facing same issue.. the data is updated and components are forced to udpate however tabel is not rendering.. if i refresh the page all data become rendered suprisely!

[jl6871]

@tannerlinsley provided the best answer. When you pass the new data from the parent to children ensure that the new data is a totally new object. You can achieve this as follows: [...]. Using the spread operator creates a new object with the same data. Hope this helps
`

[mitrosunay]

@tannerlinsley provided the best answer. When you pass the new data from the parent to children ensure that the new data is a totally new object. You can achieve this as follows: [...]. Using the spread operator creates a new object with the same data. Hope this helps
`
thanks a lot.. it took me 2 day to solve.. apriciated!