React.js Update Table from Mongo DB After Add New Row

Question

I have two components that connect main components. Like this:

Main (Parent)
- GridView (Child - Table)
- AddConnectionView (Child - Add Operations)

I can save data successfully by using AddConnectionView Class. I want to update the table in GridView after clicking the save button in AddConnectionView. I think that I'm confused for that since how can I use shouldComponentUpdate function or what I can do or solve this problem.

Please help me. Thank you!

This is my code:

MainView.tsx

import * as React from "react";
import {GridView} from "./gridView.tsx";
import {AddConnectionView} from "./addConnectionView.tsx";


export class MainSettingsView extends React.Component {

    constructor(props, context: any) {
        super(props, context);
        this.state = {clickedbtnNewConnection:false}
    }


    btnNewConnection = () => {
        this.setState({clickedbtnNewConnection:true});
    }

    render() {
        return (

            <form className="ui form">
                <div className="field">
                    <button type="button" className="ui orange button " onClick={this.btnNewConnection}>

                        <i className="plus icon"></i>
                        Yeni Bağlantı Ekle
                    </button>
                </div>
                <div className="field">
                    <GridView/>
                </div>
                <div className="field">
                    <AddConnectionView clickedBtnNewConnection={this.state.clickedbtnNewConnection} />
                </div>
            </form>


        )}
}

GridView

import * as React from "react";
import {PrivateConnection} from "../../Connection";
import {PrivateConnectionStates} from "../../ConnectionInterfaces";



export class GridView extends React.Component {

    constructor(props, context: any) {
        super(props, context);
        this.state = {connectionList:[] } as PrivateConnectionStates;

        this.getAllConnection();

    }

    public getAllConnection(event:any):void{
        fetch('/PrivateConnectionService/findAll',
            {
                method: 'GET',
                credentials: 'include',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            }).then((response) => {
            var contentType = response.headers.get("content-type");
            if (contentType && contentType.indexOf("application/json") !== -1) {
                return response.json().then( (json) => {
                    // process your JSON further
                    this.setState({
                        connectionList: [...json] as Array<PrivateConnection>
                    } as PrivateConnectionStates);
                    console.log(this.state.connectionList);

                });
            } else {
                console.log("Oops, we haven't got JSON!");
            }
        })
    }


    render() {

        var tableItems = [];
        var size=Object.keys(this.state.connectionList).length;

        for(var i = 0; i < size; i++)
        {
            tableItems.push(<tr key={i+1}><td>{this.state.connectionList[i].connectionName}</td><td>{this.state.connectionList[i].databaseName}</td><td>{this.state.connectionList[i].host}</td><td>{this.state.connectionList[i].port}</td><td>{this.state.connectionList[i].serviceName}</td><td>{this.state.connectionList[i].username}</td><td>{this.state.connectionList[i].password}</td></tr>);
        }



        return (

            <div>
                <table className="ui selectable teal celled table">
                    <thead>
                        <tr className="center aligned">
                            <th>Connection Name</th>
                            <th>Database</th>
                            <th>Host</th>
                            <th>Port</th>
                            <th>Service Name</th>
                            <th>Username</th>
                            <th>Password</th>

                        </tr>
                    </thead>
                    <tbody className="center aligned">
                    {tableItems}


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


        )}
}

AddConnectionView: There are a button and after click the button, I want to refresh the table data.

score 1 · Accepted Answer · edited May 23 '17 at 12:07

First of all, you might want to change your design in order to do this. Maybe you could just put the button in the MainView, which would make things easier (just update the GridView when the button is used sending a prop or invoking getAllConnection with a ref).

If you need/want to keep your components the way they are and use only React, you could use a callback function defined in your MainView to send it as a property to your AddConnectionView. Using that method (a function of the MainView Component) in AddConnectionView (onClick), you could send a prop to the GridView Component or invoke getAllConnection. By the way, you should call getAllConnection in componentDidMount instead of the constructor. You can see how this works here.

You could also use Redux or Flux to use one centralized state.

React.js Update Table from Mongo DB After Add New Row

1 Answers1