Dinamic data from mui-datatable

Question

I am trying to collect some infos in my firebase colection and add in the mui-datatable. How can I data dinamcly add this infos in my table?

let info = {
      name: 'Leonard',
      age: 23,
      city: 'TESTE',
      state: 'TS',
      e_mail: 'teste@teste.com'
    }
//function that reads the infos in my firebase
ReadFromDb(doc => info.ciy = doc.data().City) 
let counter = 0;
function createData(name, age, city, state, mail) {
    counter += 1;
    return { id: counter, name, age, city, state, mail};
}   
let data = [
       createData(info.name, info.age, info.city, info.state, info.e_mail),
     ];

I expect that the data can be changed after the ReadFromDb functions runs.

Answer 1

Create a state.name (wich is an array). Add the function componentWillMount() and collect the data from my firebase and concatenate all the names collected in my state.name. In my render used the name from this.state and create a while loop that compares the size of my array and put in a let data (which is an array too) the functions who create my columns.

state = {
nome: []
}

componentWillMount(){
   let i = 0;
   //function that read my firebase
   while(i !== size_of_elements_in_my_firebase){
    db.collection("Usuários").doc(doc.ids[i].id).get().then(resposta => {
          this.setState({ 
            name : this.state.name.concat([resposta.id]),
            })
        })
   i++
   }
}
newCreateData(name){
    return {name}
  }

//in my render
const { nome, idade, cidade, estado, e_mail, tamanho } = this.state;
let i = 0;
    let data = []
    while(i !== tamanho){
      data[i] = this.newCreateData(nome[i], idade[i], cidade[i], estado[i], e_mail[i]);
      i++;
    }

return(
      <MUIDataTable
        title={"Firestore data"}
        data={data}
        columns={columns}
        options={options}
      />
    )