How to Map a Array which contains JSON object in React JSX?

Question

I am getting a JSON object from firebase store in my redux action. I am storing the JSON objects inside an associative array. when I am trying to do this.props.expenses, I get back the array.

But I am not able to map the array in JSX??

import { SHOW_EXPENSE } from './types';
import database from '../config/firebase';
export const showExpenses = () =>  dispatch => {

const expenses = [];

        database.ref()
        .once('value')
        .then((snapshot) => {


                snapshot.forEach((childSnapshot) => {

                        expenses.push({

                              id: childSnapshot.key,
                              ...childSnapshot.val()        

                        })


                });

        });

        console.log(expenses);

    dispatch({

        type: SHOW_EXPENSE,
        expenses :  expenses     

})

return expenses;

};

This is my console.log(expenses);

0: {id: "-LUumVQzeXBN8iK81EVO", expense_amount: "500", expense_name: 
"bike service"}
1: {id: "-LUumeeCeYIdd2G4Pz5K", expense_amount: "1500", 
 expense_name: "tire change"}
 length: 2__proto__: 
 Array(0)

When I try to map this.props.expenses it returns nothing.

{this.props.expenses.map( data =>

      {data.expense_amount}
      {data.expense_name}
});

have you tried to wrap your map data inside div like so: {this.props.expenses.map( data =>
{data.expense_amount} {data.expense_name}
}); } — Piyush Zalani, Dec 29 '18 at 19:36
@PiyushZalani its still the same , doesnt return anything just empty — codemt, Dec 29 '18 at 19:41
@codemt Where are you using `{this.props.expenses.....` and please make sure that you are getting expenses in props. — Niraj Kaushal, Dec 29 '18 at 19:43
This is an async issue - you return expenses before they've been retrieved from the database — ic3b3rg, Dec 29 '18 at 19:45
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — ic3b3rg, Dec 29 '18 at 19:45
@ic3b3rg no i have tried using if statements to see if it is getting rendered or not. i get the console logs , but still it is not getting rendered. — codemt, Dec 29 '18 at 19:55
@NirajKaushal i am using this.props.expenses in my component , where i want to map the data i get from the firebase database. — codemt, Dec 29 '18 at 19:56
@codemt check that `this.props.expenses` is being set or not. — Niraj Kaushal, Dec 29 '18 at 19:58
that's just how the console works - expenses is an empty array when you initially log it - by the time you've opened the array in the console, the array has been populated by the response - try `console.log(JSON.stringify(expenses))` - it will be an empty array. — ic3b3rg, Dec 29 '18 at 19:59
btw, the fix is to move your `dispatch` inside the `then` block — ic3b3rg, Dec 29 '18 at 20:00
@ic3b3rg You are awesome bro . yes i am getting the data now :) , can you explain why this happened? i am confused a little. — codemt, Dec 29 '18 at 20:09
your database call is asynchronous - that means it will make a request and then carry on with other work, i.e. the code after the database call. When the database request completes, the code in your `then` block is executed - make sense? — ic3b3rg, Dec 29 '18 at 20:15

How to Map a Array which contains JSON object in React JSX?

0 Answers0