Display data from state

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

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

Answer 2

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>
    );
  }
}