React 仅在数组映射上循环一次

Question

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

Now this is the map :

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

})

[ ]

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>

Answer 1

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.