Java script

Question

#Help_Post
const App = () => {

const getContacts = () => {
getcontacts().then(contacts => {
contacts.map((contact) => {
console.log(contact.name);
return(
<div className = 'grow pa3 bg1 ma2 text-center br-pill shadow-3'>
<p>{contact.name}</p>
<p>{contact.email}</p>
<p>{contact.phoneNumber}</p>
</div>
);
});
console.log(contacts);
})
.catch(err => console.log(err));
}

return (
<Base>
{getContacts()}
</Base>
);
}

in the above code when I map through the contacts in getContacts function, console.log(contact.name) provides the expected output but when I try to return JSX using the same, it returns nothing.

Answer 1

You are returning JSX from map method(is there a reason to do so?) but your getContacts function returns nothing.

Declare an array at top of your getContacts function and push the contact objects(JSX) within map method.
Then return the array from getContacts.

[Edit some days later] I don't know if this is really what you need. I'm a beginner too.

Answer 2

Try console.log(this.contact.name)