Why is the list not rendering?

Question

i'm new to react and i'm playing around to see how the basic concepts work. I'm trying to render at list with data from a firebase server, the deta gets fetched ok but i'm having trouble rendering it in my listitem component.

Parent Component:

class App extends Component {
  state = {
    data: null as null | Data[]
  }
  componentDidMount() {
    this.getData();
  }

  private getData(): void {
    let _data = new Array < Data > ()
    const db = firebase.firestore();
    db.collection('data').get()
      .then(snapshot => {
        snapshot.docs.forEach(doc => {
          let data: Data = {
            id: doc.id,
            name: doc.data().name,
            description: doc.data().description,
            country: doc.data().country,
            town: doc.data().town,
            lat: doc.data().lat,
            long: doc.data().long,
            created: doc.data().created,
            updated: doc.data().updated,
            img: doc.data().img
          }
          _data.push(data)
        })
      })
    this.setState({
      data: _data
    })
  }



  render() {
    let list = null;
    if (this.state.data) {
      list = ( 
      <div > {
          this.state.data.map(d => {
            return <ListObject name = {d.name} />
          })
        } </div>
      )
    }
    return ( 
      <div>
        <p> List </p>
        {list}
      </div>
    )
  }
}

export default App;

Child Component:

import React from 'react'
import './ListObject.css';

const listObject = (props: any) => {
    return (
        <div className="ListObject">
            <p>i Am {props.name}</p>
        </div>
    )
};

export default listObject;

What am i doing wrong here? The ListObject component works outside of the iteration.

Toan Quoc Ho · Accepted Answer · 2019-10-20 17:40:02Z

2

That's because db.collection('data').get() asynchronously run so that in your code, state haven't been set:

let _data = [];
db.collection('data').get().then(function() {
   _data.append();
});
this.setState({
    data: _data
})

there is no data in _data.

So to get rid of this, you could use synchronous loop for ... of, and make the code a bit easier to read like so:

private getData(): void {
    const db = firebase.firestore();
    db.collection('data').get()
      .then(snapshot => {
         let _data = new Array < Data > ()
         for (let doc of snapshot.docs) {
            let data: Data = {
                id: doc.id,
                name: doc.data().name,
                description: doc.data().description,
                country: doc.data().country,
                town: doc.data().town,
                lat: doc.data().lat,
                long: doc.data().long,
                created: doc.data().created,
                updated: doc.data().updated,
                img: doc.data().img
            }
            _data.push(data);
         }
         this.setState({
             data: _data
         });
      })
  }

and your render:



render() {
    let list = (this.state.data || []).map(d => {
        return <ListObject name = {d.name} />
    });

    return ( 
        <div>
            <p> List </p>
            <div>{list}</div>
        </div>
    )
}

edited Oct 20, 2019 at 17:40

answered Oct 20, 2019 at 16:49

Toan Quoc Ho

3,3761 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Johannes Kraft Over a year ago

yeah sorry the dogparks was a typo that i have fixed now.

Toan Quoc Ho Over a year ago

Sorry, my bad.. it's supposed to be inside render function.

Juust · Accepted Answer · 2019-10-20 16:44:03Z

1

Because dogparks is null.

Also you should create list outside of your render method.

So like:

let list = (this.state.data || []).map(d => {
    return <ListObject name = {d.name} />
});

render() {
    return ( 
      <div>
        <p> List </p>
        <div>{list}</div>
      </div>
    )
  }

answered Oct 20, 2019 at 16:44

Juust

709 bronze badges

Collectives™ on Stack Overflow

Why is the list not rendering?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related