CODEWITHSUNDEEP
reactjsreact-reduxreact-hooks
Muhammad Bilal
Muhammad Bilal

Reputation: 25

TypeError: Cannot read property 'map' of undefined : object having list of objects

I'm trying to map data using below json format. An object having list of objects.

'''{"pki_user_id":1234,"vc_username":null,"vc_password":null,"vc_name":"Muhammad","vc_email":"[email protected]","b_isreset":false,"b_timeout":0,"_RoleDto":[{"pki_role_id":30019,"vc_rolename":"SuperUser","vc_roledesc":"Super User","vc_type":null,"i_group":0,"_MenuDto":null},{"pki_role_id":20015,"vc_rolename":"COMADM","vc_roledesc":"Competency Admin","vc_type":null,"i_group":0,"_MenuDto":null},{"pki_role_id":2,"vc_rolename":"IT","vc_roledesc":"IT","vc_type":null,"i_group":0,"_MenuDto":null},{"pki_role_id":3,"vc_rolename":"TAA","vc_roledesc":"Time Attendance Administrator","vc_type":null,"i_group":0,"_MenuDto":null}]}'''

This is how I'm retrieving data:

        {props.LoginDto.vc_email}

        {props.LoginDto._RoleDto.map((record,i) => (

          <div key = {i}> {record.pki_role_id}</div>
        ))}

      </div>

Every time I'm getting this error. I'using react redux to receive props data.

Upvotes: 0

Views: 58

Answers (2)

Uma Rani
Uma Rani

Reputation: 1

{props.LoginDto && props.LoginDto.vc_email}

    {props.LoginDto && props.LoginDto._RoleDto && !!props.LoginDto._RoleDto.length && props.LoginDto._RoleDto.map((record,i) => (

      <div key = {i}> {record.pki_role_id}</div>
    ))}

  </div>

Upvotes: 0

Akhilesh
Akhilesh

Reputation: 524

Add a null check like this:

{props.LoginDto && props.LoginDto.vc_email}

        {props.LoginDto && props.LoginDto._RoleDto && !!props.LoginDto._RoleDto.length && props.LoginDto._RoleDto.map((record,i) => (

          <div key = {i}> {record.pki_role_id}</div>
        ))}

      </div>

Upvotes: 1

Related Questions