Display data from state - reactjs

Question

I have took data from firebase and want to display:
class DisplayVisit extends Component{
state = {
allVisit: [] //this I have changed
}
componentDidMount(){
this.getVisit();
}
getVisit = async() => {
try {
const currentVisit = await doctorvisit.get();
this.setState({ allVisit: currentVisit })
this.state.allVisit.forEach(element => {
console.log(element.data()) // i see data, fields like => {user, info, visitAt}
});
} catch(error) {
console.log('error getting visits ', error);
}
}
render(){
return(
{Object.keys(this.state.allVisit).map(key => (
<span>{this.state.allVisit[key].info}1</span>
))}
)
}
}
But nothing is render.
I tried also {key.info} but nothing is render.
Screen from console:
Log from console.log(this.state.allVisit);:

Answer 1

If i see good, you're setting the state allVisit to currentVisit, wich is a single object.
Either your allVisit property in state is an array with visit objects inside, or simply apply currentVisit in state as a single object.
In the meantime, you're looping a single object, if its what you're trying to achieve, remove the .info after the [key] and you will have all you're property displayed
If you want to loop through nested objects or an array of object provide more informations
Update, i'll tried to guess your data so try with this code
export default class DisplayVisit extends Component {
state = {
allVisit: [] //this I have changed
};
componentDidMount() {
this.getVisit();
}
getVisit = async () => {
try {
const { docs } = await doctorvisit.get();
//try this if first not working
const allVisitsData = await doctor.visit.get()
this.setState({ allVisit: docs });
//try this if first not working
//this.setState({ allVisit: allVisitData.docs });
//or this
} catch (error) {
console.log("error getting visits ", error);
}
};
render() {
return (
<div>
{this.state.allVisit.map((visit) => (
<span key={visit.info}>{visit.info} 1</span>
))}
</div>
);
}
}

Answer 2

I did it based on Google docs:
class DisplayVisit extends Component{
state = {
allVisit: []
}
componentDidMount(){
this.getVisit();
}
getVisit = async() => {
try {
await doctorvisit.get().then(querySnapshot => {
const data = querySnapshot.docs.map(doc => doc.data());
this.setState({allVisit : data});
})
} catch(error) {
console.log('error getting visits ', error);
}
}
}
Documentation:
https://firebase.google.com/docs/firestore/query-data/get-data?hl=en
and blog/post:
https://rnfirebase.io/firestore/usage