ReactJS access to object into object with map and Object.keys()-CodePudding

I have problem to get information in my arrayin ReactJS.

That is the array I'm trying to read :

const governmentList = [
    0: {
        id: "",
        _date: "",
        infoMain: {
            idInfo: "",
            firstName: "",
            LastName: ""
        },
        infoSecond: {
            idInfo: "",
            firstName: "",
            LastName: ""
        },
        infoThird: {
            idInfo: "",
            firstName: "",
            LastName: ""
        }
    },
    1: {
        id: "",
        _date: "",
        infoMain: {
            idInfo: "",
            firstName: "",
            LastName: ""
        },
        infoSecond: {
            idInfo: "",
            firstName: "",
            LastName: ""
        },
        infoThird: {
            idInfo: "",
            firstName: "",
            LastName: ""
        }
    },
    //etc...
]

I want to get firstName value of each object of my index 0, then 1, then 2...:

<Box>
                <Grid>

                    {governmentList.map((value, key) =>
                    (


                        <Grid>
                            <Paper>

                                {Object.keys(value).map((key) => {
                                        console.log(value[key][0].firstName)
                                })}
                            </Paper>
                        </Grid>
                    )
                    )};
                </Grid>
            </Box >

But my terminal return me an error :

Uncaught TypeError: Cannot read properties of undefined (reading 'firstName')

Do you have any ideas to solve my issu please ?

CodePudding user response：

You have copied the data from the console I think. Your data is as follows, right?

const governmentList = [
  {
    id: "",
    _date: "",
    infoMain: {
        idInfo: "",
        firstName: "",
        LastName: ""
    },
    infoSecond: {
        idInfo: "",
        firstName: "",
        LastName: ""
    },
    infoThird: {
        idInfo: "",
        firstName: "",
        LastName: ""
    }
},
 {
      id: "",
      _date: "",
      infoMain: {
          idInfo: "",
          firstName: "",
          LastName: ""
      },
      infoSecond: {
          idInfo: "",
          firstName: "",
          LastName: ""
      },
      infoThird: {
          idInfo: "",
          firstName: "",
          LastName: ""
      }
  },
  //etc...
]

You can loop throug it as follows:

{governmentList.map(item => {
        return Object.keys(item).map(key => {
          return <div>Name: {item[key]?.firstName}</div>
        })
})}

This ? on item[key]?.firstName will take care that you do not get an error if the firstName does not exists.

CodePudding user response：

Can You Try this one

{Object.keys(value).map((key) => {
       console.log(value[key][0].firstName&&value[key][0].firstName)
                                 })}