How to assign value to dictionary constant and store in state?

Question

I am new to react and I am trying to get data from api and then assign the data to dict constant. After that, I would like to load the dict to a customized table and show those data. What I want to do is doing something like data.Table.FIRST_TABLE.data = response.data.data intending to assign the data fetched from post API to the data dict. Thanks in advance for helping me. Here is the code:

    let data = {
        Table:{
            'FIRST_TABLE':{
                settings: {
                    colOrder: ['first_col', 'second_col'],
                },
                columns:{
                    'first_col':{
                        visible: true,
                    },
            'second_col':{
                        visible: true,
                    },
                },
                data:[],
            },
        },
    }

    class MainLayout extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};
            this.handleSubmit = this.handleSubmit.bind(this);
        }

        handleSubmit = e => {
            e.preventDefault();
        axios
          .post('http://localhost:4000/api/loadData/')
                .then(function(response){
                    data.Table.FIRST_TABLE.data = response.data.data //stick data to data dict
                })
          .catch(err => {
            console.error(err);
          });
        };
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                <input 
                   type="submit" 
                   value="Check Mapping" 
                   onClick={this.onSubmit}
                />
                <CustomTable state={data}> 
           //data dict define the table structure and data presenting
                    <Table />
                </CustomTable>
                </form>
            );
        }
    }

Answer 1

you should consider that in React render works with state

and you don't need to use bind if you use arrow functions

test this code:

    class MainLayout extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
    data : {
            Table:{
                'FIRST_TABLE':{
                    settings: {
                        colOrder: ['first_col', 'second_col'],
                    },
                    columns:{
                        'first_col':{
                            visible: true,
                        },
                'second_col':{
                            visible: true,
                        },
                    },
                    data:[],
                },
            },
        }};                   }

                handleSubmit = e => {
                    e.preventDefault();
                axios
                  .post('http://localhost:4000/api/loadData/')
                        .then(response => {
                            const data={...this.state.data}
                            data.Table.FIRST_TABLE.data = response.data.data
                            this.setState({ data })
 //stick data to data dict
                        })
                  .catch(err => {
                    console.error(err);
                  });
                };
                render() {
                    return (
                        <form onSubmit={this.handleSubmit}>
                        <input type="submit" value="Check Mapping" />
                            <CustomTable state={this.state.data}> //data dict 
            define the table structure and data presenting
                                <Table />
                            </CustomTable>
                            </form>
                        );
                    }
                }