React | DataGrid does not update with changed State

Question

I am currently working on a linktree using the Datagrid Component from MaterialUI. Data can be displayed, but when I try to add a new entry there occurs the problem that the content remains the same. The state changes, but without rendering the new data.

const columns = [
{field: 'date', headerName: 'Date', width: 120},
{
    field: 'videoUrl',
    headerName: 'Video URL',
    width: 430,
    renderCell: (params) =>
            <a href={(params.value)}>{params.value}</a>
},
{field: 'description', headerName: 'Description', width: 130},
];


class Linktree extends React.Component {
    this.state = {
        newLink: "",
        newDescription: "",
    }
}

handleAddNewLink(newLink, description) {
    let obj = this.state.linksData
    let newEntry = {id: this.state.linksData.length+1, postDate: today, videoUrl: newLink, description: description}
    obj.push(newEntry)

    this.setState({linksData: obj})
}

render (){
    return (
        <div>
            <div style={{height: 400, width: '100%', backgroundColor: "white"}}>
                <DataGrid rows={!this.state.loading ? this.state.linksData : []} columns={columns} pageSize={5} hideFooterSelectedRowCount/>
            </div>
        </div>
    );
}}

score 1 · Accepted Answer · answered Feb 10 '21 at 03:09

Mutating State

The reason that you don't get proper updates is that you mutated your state right here when you called obj.push:

handleAddNewLink(newLink, description) {
    let obj = this.state.linksData
    let newEntry = {id: this.state.linksData.length+1, postDate: today, videoUrl: newLink, description: description}
    obj.push(newEntry)
    this.setState({linksData: obj})
}

Javascript is a "pass by reference" language (mostly), so obj is a new variable that stores the same reference to the same array object as this.state.linksData. So you cannot call mutating methods on obj.

Solution

Set linksData to a new array by copying the contents of the old array.

handleAddNewLink(newLink, description) {
    let newEntry = {id: this.state.linksData.length+1, postDate: today, videoUrl: newLink, description: description}
    this.setState(prevState => ({
      linksData: [...prevState.linksData, newEntry]
    }));
}

React | DataGrid does not update with changed State

1 Answers1

Mutating State

Solution