I'm creating a component which is basically a container of apartments rendered as a table. I'm saving an array of apartments as a state property "flats". Every row of table has also one button which should remove that one row also from database by calling external API. Everything works fine except...! Is there any way how to rerender this component (list of apartments) every time someone creates a record in database (this is done by another component of my React app)?

Is it right to rerender component every time database changes?

Case 1) I opened a browser and I can see list of items. Users change the database and this list of items changes real-time, I can see how items are created and removed from database.

Case 2) I opened a browser and I can again see list of items, no changes in front of me. Now, some other person removes item from my list and I don't know about it. I click on this item but the item is no longer in database. What to do?

So, what is the best attitude on this use case? Down here, you can see my code for my Aparatments Component.

import React, { Component } from 'react';
import axios from "axios";

export default class FlatsLayout extends Component {

    constructor(props) {
        super(props);

        this.state = {
            flats: []
        }
    }



    componentDidMount() {
        axios.get("http://192.168.0.14:4000/flats")
            .then(res => {
                this.setState({flats: res.data});
                console.log(res.data);
            });
    }

    onDeleteFlat(flatID, e) {
        axios.delete("http://192.168.0.14:4000/flats/" + flatID).then( res => {
            console.log(res.data);
        });
        const data = this.state.flats.filter(flat => flat._id !== flatID);
        this.setState({
            flats: data
        });
    }

    render() {
        return (
            <div>
                <h2>Flats</h2>
                <table className="table table-striped table-bordered">
                    <tbody>
                    {
                        this.state.flats.map( flat => {
                            return (
                                <tr key={flat._id}>
                                    ...
                                    <td><a href={flat.URL}>link</a></td>
                                    <td>
                                        <button
                                            type="Button"
                                            className="btn btn-sm btn-danger"
                                            onClick={ (e) => this.onDeleteFlat(flat._id, e)}
                                        >
                                            Remove
                                        </button>
                                    </td>
                                </tr>
                            )
                        })
                    }
                    </tbody>
                </table>
            </div>
        )
    }
}

1 Answers

1
jsdeveloper On

There are multiple ways to achieve this:

  1. A reactive database connection e.g. Firebase (https://firebase.googleblog.com/2014/05/using-firebase-with-reactjs.html)
  2. Websockets - server sends message to each connected client when the flats data has changed.
  3. Polling the server for updates