how to map through an array of objects in react redux

Question

I am trying to access the users via redux

const mapStateToProps = state => ({
    user: state.user.userdata
})

and when I do

console.log(this.props.user)

I get an array of two objects data and status

data: Array(2)
0: {id: 1, name: "kayondo"}
1: {id: 2, name: "syphat"}
length: 2
__proto__: Array(0)
status: 200

but when i try to map through the data key by

this.props.user.data.map(x => (<div>{x.name}</div>}

i get an error undefined in the console ? How can I solve this

What do you get when you do console.log(this.props.user.data)? What is the full error message from the console? — Code-Apprentice
What do you mean an "array of 2 objects?" Is this.props.user itself an array, or are you just referring to data? It's tough to tell the entire data structure from what you posted. — Chris B.
Are you making an api call when the component is rendered? this sounds like maybe this.props.user.data doesn't exist until after the api call is resolved. If this is the case you need a conditional render const { data } = this.props.user; if (data && data.length) { // map here } — Aaron Ross
@AaronRoss yes it true I get two responses as the first is an empty array and the second one has an array with data — Kayondo Edward

Usman Khalil Usman Khalil · Accepted Answer · 2019-10-09T11:29:01

You aren't using the right syntax to map. Try using this one:

this.props.user.data.map(x => (<div>{x.name}</div>));