Reactjs does not render data in table

Question

Obtaining data from firestore and trying to render in a table with reactJS I can not render it. Does anyone know if I have an error?

This is my code:

state = {
    items:[]
};

componentDidMount(){
    db.collection('items').get().then((snapShot) => {
        snapShot.docs.map( doc => {
           this.state.items.push({ id: doc.id, data: doc.data()});
        })
   }, error => {
       console.log(error)
   }); 
};

Table

render() {
    const { items, inputValue } = this.state;
    console.log(items)
    return (
        <React.Fragment>
            <Table hover className="text-center">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Edit</th>
                    <th>Delete</th>
                </tr>
                </thead>
                <tbody>  
                    { items && items !== undefined ? items.map((item, key) => (
                        <tr><td>{item.data.item}</td></tr>
                     )): null }
                </tbody>
             </Table>
        </React.Fragment>
    )
  }

Making a console.log of this.state.items I get the data like this:

0:{id: "1NDr66bsRosASM7qYCJb", data: {…}}
1:{id: "2k0DKLVBlPxZDIQt7KPx", data: {…}}
2:{id: "4cADNojHNXqkFcnl52jw", data: {…}}

And using map I can not access the data.

Can you help me, please? Thank you

this.state.items.push do not modify state object directly. Use setState method. — Yury Tarabanko
– Yury Tarabanko, Commented Aug 28, 2018 at 6:24
@YuryTarabanko I do not know how I forgot that! Thank you!!! — OscarDev
– OscarDev, Commented Aug 28, 2018 at 6:29

Sanju Uthaiah Bollera · Accepted Answer · 2018-08-28 06:29:33Z

3

In componentDidMount() you have to set your state.

componentDidMount(){
    db.collection('items').get().then((snapShot) => {
       this.setState({
       items:snapShot.docs.map( doc => {
           return { id: doc.id, data: doc.data()}               
        });
       });
   }, error => {
       console.log(error)
   }); 
};

answered Aug 28, 2018 at 6:29

Sanju Uthaiah Bollera

3891 gold badge2 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

Reactjs does not render data in table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related