CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-realtime-database
like who
like who

Reputation: 121

React loops over array map only once

I want to generate a table in react and I want to take the data from firebase and put it in a json and pass that to the main file

  var dummy = [
       {'name':'shoe','remark':'remark','price':'price','photo':'photo','amount':'350',},
   
   ]
   var ref = db.ref("users/random/cart");
   ref.once("value")
   .then( function(snapshot) {
     var snapshot_value = snapshot.val();
   var this_is_an_example = {'name':'shoe','remark':'remark','price':'price','photo':'photo','amount':'350'};
       dummy.push(this_is_an_example)
       ref.off();
   
   });
   export default dummy;

In the main file if I console.log() I get enter image description here

Now this is the map :

dummy.map((data) => {
console.log('data here', data)

enter image description here })

[enter image description here]

It iterates once then throws this error I do not think that the table error is the reason why it iterates only once because the error is thrown even when I only have one element in array

Here is the full code for the table

              <ClientTable>
               <thead>
               <ClientTr>
                   <ClientTh>Item Name</ClientTh>
                   <ClientTh>Remark</ClientTh>
                   <ClientTh>Price</ClientTh>
                   <ClientTh>Quantity</ClientTh>
                   <ClientTh>Amount</ClientTh>
                   <ClientTh>Edit</ClientTh>
               </ClientTr>
               </thead>
                   <tbody>
                   {dummy.map((data, key) => {
                       console.log('one', data)
                       return (
                           
                           <ClientTr key={'key'}>
                               <ClientTd>
                                   <Wrapper>
   
                                       <ProductWrapper>
                                           <ImageWrapper src={Product} alt="product" />
                                       </ProductWrapper>
                                       {data.name}
                                   </Wrapper>
                               </ClientTd>
                               <ClientTd>
                                   {data.remark}
                               </ClientTd>
                               <ClientTd>
                                   {data.price}
                               </ClientTd>
                               <ClientTd>
                                   <NumberBox />
                               </ClientTd>
                               <ClientTd>
                                   {data.amount}
                               </ClientTd>
                               <ClientTd>
                                   Delete
                               </ClientTd>
                           </ClientTr>
   
                       );
   
                   })}
                   </tbody>
               </ClientTable>

Upvotes: 0

Views: 98

Answers (1)

Muhammad Aamir
Muhammad Aamir

Reputation: 106

See ClientTr is the Direct child of ClientTable, and the issue says tr can't be the direct child of the table, tr can appear as child of thead, tbody or tfoot. So your ClientTr contains headers, just put it inside the thead and the issue will be resolved.

Upvotes: 1

Related Questions