React Firebase update components without refresh

Question

I have the following table that I'm populating with data from firebase. Everything is working fine, all updates go into the table, but I have to refresh the page in order to see new additions. Is there a way to fix this? The solutions I've seen so far used react redux, which I don't have implemented, nor know how to use, so I couldn't get them working. Thanks in advance!

class oneRegisterInfo extends Component{
    constructor(props) {
        super(props);

        this.state = {
            rows: [],
            index: '',
            body: '',
            dataType: '',
            options: [],
            open: false,
            buttonType: ''
        };

    }

    componentDidMount = () => {
        axios
            .get('/RowData')
            .then((response) => {
                this.setState({
                    rows: response.data,
                });
            })
            .catch((err) => {
                console.log(err);
            });
    };

        render(){
            const handleSubmit = (event) => {
                // authMiddleWare(this.props.history);
                event.preventDefault();
                const newRow = {
                    index: this.state.index,
                    body: this.state.body,
                    dataType: this.state.dataType,
                    options: this.state.options,

                };
                let options = {};
                if (this.state.buttonType === 'Edit') {
                    options = {
                        url: `/RowData/${this.state.rowId}`,
                        method: 'put',
                        data: newRow
                    };
                } else {
                    options = {
                        url: '/RowData',
                        method: 'post',
                        data: newRow
                    };
                }
                // const authToken = localStorage.getItem('AuthToken');
                // axios.defaults.headers.common = { Authorization: `${authToken}` };
                axios(options)
                    .then(() => {
                        this.setState({ open: false });
                    })
                    .catch((error) => {
                        this.setState({ open: true, errors: error.response.data });
                        console.log(error);
                    });
            };


            return(
                <div>
                    <div>
                        <center><h1>Page 1</h1></center>
                    </div>

                    <TableContainer>
                      <Table>
                        <TableHead>
                          <StyledTableRow>
                            <StyledTableCell align="left">Index</StyledTableCell>
                            <StyledTableCell align="left">Body</StyledTableCell>
                            <StyledTableCell align="left">Datatype</StyledTableCell>
                            <StyledTableCell align="left">Options</StyledTableCell>
                          </StyledTableRow>


                        </TableHead>
                        <TableBody>
                          {this.state.rows.map((row) => (
                            <StyledTableRow key={row.rowId}>
                              <StyledTableCell align="left">{row.index}</StyledTableCell>
                              <StyledTableCell align="left">{row.body}</StyledTableCell>                       
                              <StyledTableCell align="left">{row.dataType}</StyledTableCell>
                              <StyledTableCell align="left">
                                  <Options options = {row.options}/>
                              </StyledTableCell>
                            </StyledTableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </TableContainer>

                    // ...form

Answer 1

The firebase docs are very helpful. They are super in depth and even give you all the code in like 20 languages. https://firebase.google.com/docs

db.collection("yourCollection")
    .onSnapshot((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            console.log(doc.data()); //do what ever you need here
        });
        console.log();
    });

also maybe true using the useState hook. It is much better.