Unable to update the data of table after render

Question

import React from 'react';
import { observer } from "mobx-react"
import { inject } from "mobx-react"
import { deleteTradeData } from "../Actions/Actions"
import axios from "axios"
@observer
export default class TradeTable extends React.Component {


    componentDidMount() {

        //Adding data of db into mobx store
        axios.get(`http://localhost:8091/trade`)
            .then(res => {
                this.props.store.arr = res.data;
                console.log(res.data ,"resssssdata")
            })

    }

    delete = (id) => {
        console.log(id + "wdccerfec")
        deleteTradeData(id);
         window.location.reload();
    }

    edit = (id) => {
        console.log(id + "iddddddddddddddddddddd")

        this.props.store.editId = id;
        this.props.store.formToggleFlag = false;
        // alert("hi")
        // window.location.reload();
    }
    render() {

        var tableData = this.props.store.arr;


        return <div className="panel panel-default">
              {this.props.store.newTradeRender}
            <div className="panel-body tradeComponent div-background table-responsive">
                <table className="table table-striped tb div-lightbackground">

                    <thead className="thead-dark ">
                        <tr>
                            <th>Date</th>
                            <th>Commodity</th>
                            <th>Side</th>
                            <th>Qty (MT)</th>
                            <th>Price (MT)</th>
                            <th>Counterparty</th>
                            <th>Location</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>

                        {
                            tableData.map((tableItem, index) => {
                                return (
                                    <tr key={index * Math.random()}>
                                        <td>{tableItem.tradeDate}</td>
                                        <td>{tableItem.commodity}</td>
                                        <td>{tableItem.side}</td>
                                        <td>{tableItem.quantity}</td>
                                        <td>{tableItem.price}</td>
                                        <td>{tableItem.counterparty}</td>
                                        <td>{tableItem.location}</td>

                                        <td>

                                            <button type='submit' className="btn btn-primary table-style" onClick={this.delete.bind(this, tableItem.id)} >
                                                <span className="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                            </button>

                                        </td>
                                        <td>

                                            <button type='submit' className="btn btn-primary table-style edit edit-button" onClick={this.edit.bind(this, tableItem.id)} >
                                                <span className="glyphicon glyphicon-pencil selected-glyph edit-pencil" aria-hidden="true"></span>
                                            </button>
                                        </td>

                                    </tr>)
                            })
                        }

                    </tbody>
                </table>
            </div>
        </div>
    }
}

The above codes get rendered when an action in other component is fired (which is my logic).

The problem is that the render of the trade table component doesn't results in updating of the table data.Now this behavior is expected because the component did mount is called after render hence since the store data is not updated so trade table is not updated.

But i am unable to solve this problem. I tried component will mount and will update but that is causing some strange behavior ( a loop of updating table runs ) which cause my system & browser to freeze .So i cant not use that.Is there any logic or alternative?

Answer 1

In React JS you cannot change the props by doing this.props.store.arr = res.data;. This is because in React JS there is unidirectional flow of data, which means data can only flow in one direction and that is from parent to child. So the only way to change the props is by changing the value that is passed down by the parent.

Also ReactJS re-renders only on certain conditions. One is when reactJS state changes and another is by using shouldComponentUpdate. And you have to change React state using setState. If you change the state like this.state.foo = "bar" react will not re-render.