Nested DataGrid not updating when data changes

[chrwei]

the nested grid only redraws when you close and open the expander.  is it because I'm using a reducer?  or something else?

Code:

import React, { useReducer } from 'react';
import './App.css';
import { DataGrid, GridColumn, LinkButton } from 'rc-easyui';

function App() {
    const [data, setData] = useReducer(dataReducer, null, () => (
    [
        { a1:"a", a2:"A", c:[{ b1:"x", b2:"X" }] },
        { a1:"b", a2:"B", c:[] },
        { a1:"c", a2:"C", c:[] },
    ]));

    return (
        <div className="App">
            <DataGrid
                data={data}
                renderDetail={({row}) => {
                    return (
                        <div style={{ marginLeft: 30 }}>
                            <DataGrid
                                data={row.c}
                            >
                                <GridColumn field="b1" title="Col1" width={110} />
                                <GridColumn field="b2" title="Col2" width={110} />
                            </DataGrid>
                        </div>
                    );
                }}
            >
                <GridColumn key="e" field="e" expander width={30}></GridColumn>
                <GridColumn field="a1" title="Col1" width={110} />
                <GridColumn field="a2" title="Col2" width={110} />
            </DataGrid>
            <LinkButton onClick={()=>setData({a1:"a", c:{ b1:"y", b2:"Y" }})}>Add y-Y row to a-A</LinkButton>
            <LinkButton onClick={()=>setData({a1:"a", c:{ b1:"z", b2:"Z" }})}>Add z-Z row to a-A</LinkButton>
            <LinkButton onClick={()=>setData({a1:"b", c:{ b1:"y", b2:"Y" }})}>Add y-Y row to b-B</LinkButton>
            <LinkButton onClick={()=>setData({a1:"b", c:{ b1:"z", b2:"Z" }})}>Add z-Z row to b-B</LinkButton>
        </div>
    );
}

const dataReducer = (data, item) => {
    let newData = [ ...[], ...data];
   
    newData.find(s=>s.a1===item.a1).c.push(item.c);

    return newData;
}

export default App;

[chrwei]

adding this column to the top grid also does not update when new items are added

Code:

<GridColumn field="x" render={({row})=>"Entries " + row.c.length} />

[jarry]

Please use this code instead.

Code:

const dataReducer = (data, item) => {
    let newData = [...[], ...data];
    const row = newData.find(s => s.a1 === item.a1);
    row.c = [...row.c, item.c];
    return newData;
}

[chrwei]

ah, needed to replace the array, not modify in place, but needed row.c = [...row.c, ...[item.c]]; because it's a string value

the .length field still doesn't update though. I also tried replacing the "x" with "c"