reactjs - How to access the data within object fetch from firestore

Question

How can i get access to the data from the object that i fetch from firebase forestore. I have code in which i get complete object from firebase like

localInvoice:{
  name:Ali, 
  date:29/09/2020,
  Phone:033562100555
 }

but when it comes to access inner values of objects then i get error message. The error message is like, for example if i want to access the name

const[invoice, setInvoice]=useState({
  name:Ali, 
  date:29/09/2020,
  Phone:033562100555
 });
console.log(invoice.name);
//error message --> Cannot read property 'name' of undefined

This is my Code in which

1. First I simply add data to my firestore
2. Secondly i am fetching the same data i added before. I am passing name, phone, date, string date as props to get the same data i added from firestore

if my question in not conveying properly then please ask me it will be helpfull if changes should be done in code given in links

question from:https://stackoverflow.com/questions/66060439/how-to-access-the-data-within-object-fetch-from-firestore

Answer 1

This is because your currentInvoice is an array, since you store it this way:

setCurrentInvoice(
   snapshot.docs.map((doc) => ({ id: doc.id, data: doc.data() }))
)

You can access the name like this:

console.log(currentInvoice[0].data.name);

However, if you only want to store the first invoice, you can do it so:

 setCurrentInvoice(snapshot.docs[0].data());

And then access the name like you wanted first:

console.log(invoice.name);