Dynamic Buttons creation React - reactjs

Question

I am trying to fetch the firebase data into a array and for each element create a button with that element as an id and name.
import React, { Component } from 'react'
import app from './firebase'
import firebase from "firebase/app";
import "firebase/database"
import { BsFillSquareFill } from "react-icons/bs";
import { Container,Row, Col } from "react-bootstrap";
import { withRouter } from 'react-router-dom';
var chambers = []
export default class ChamberClass extends Component {
constructor(props) {
super(props);
}
getButtonsUsingMap = () => {
return chambers.map((number) => {
return <button id={number} onClick={this.routeChange} className="btn"><BsFillSquareFill key = {number} color='green' className="icon "/>
<center>{number}</center>
</button>
})
}
componentDidMount(){
var chamberListen = firebase.database().ref()
chamberListen.on('value', snapshot => {
snapshot.forEach((cham) => {
var chamKey = cham.key;
var chamData = cham.val();
chambers.push(chamKey)
// document.getElementById("Chambers").innerHTML = chambers
console.log(chambers)
})
})
}
render() {
return (
<div>
<h4 className='RoomsTitle'>Rooms</h4>
<hr></hr>
{this.getButtonsUsingMap()}
</div>
)
}
}
I do get the console log which probably means that the firebase data is being accessed properly. However no buttons are being created.
Also when i move the code block inside componentDidMount() to the top of the ChamberClass, the buttons do get displayed but only once. After every successive attempt after reload or manually going to the route doesnt help either.

Answer 1

You need to put the array chambers into the component state. Without that you change the value but your component doesn't know that something changed and wont render as you expect it. By putting it into the component state it will know when it changes:
import React, { Component } from "react";
import app from "./firebase";
import firebase from "firebase/app";
import "firebase/database";
import { BsFillSquareFill } from "react-icons/bs";
import { Container, Row, Col } from "react-bootstrap";
import { withRouter } from "react-router-dom";
export default class ChamberClass extends Component {
state = {
chambers: [],
};
constructor(props) {
super(props);
}
getButtonsUsingMap = () => {
return this.state.chambers.map((number) => {
return (
<button id={number} onClick={this.routeChange} className="btn">
<BsFillSquareFill key={number} color="green" className="icon " />
<center>{number}</center>
</button>
);
});
};
componentDidMount() {
var chamberListen = firebase.database().ref();
chamberListen.on("value", (snapshot) => {
var chambers = [];
snapshot.forEach((cham) => {
var chamKey = cham.key;
var chamData = cham.val();
chambers.push(chamKey);
// document.getElementById("Chambers").innerHTML = chambers
console.log(chambers);
});
this.setState({ chambers });
});
}
render() {
return (
<div>
<h4 className="RoomsTitle">Rooms</h4>
<hr></hr>
{this.getButtonsUsingMap()}
</div>
);
}
}