CODEWITHSUNDEEP
javascriptreactjs
Seyyid Said
Seyyid Said

Reputation: 525

TypeError: Cannot read property 'id' of undefined (REACTJS)

Am still new to Reactjs, thought have tried all I can, but still can't get through this error "TypeError: Cannot read property 'id' of undefined" please someone help below is my code.

if(this.props.controller === 'location'){  

   eventData = Object.keys(this.props.heda).map( evKey => {

        return Object.keys(evKey).map( post => {

            return [...Array(this.props.heda[evKey][post])].map( lol => {

                    return  <Event key= {lol['id']}          
                    descriptions = {lol['description']}
                    headings = {lol['title']}
                    id = {lol['id']} 
                    clicked = { ()=> this.viewSelectedEvent(lol['id']) }/>;

            }) ; 

        });

    });

}

Error full stacktrace:

enter image description here

here is my data from flask that am trying to loop.Am trying to convert each object into an array, then loop through the array. I also tried to console.log(lol) and i get the data as in the image below data is available

 events = [
        {
          'id': 1,
          'title': u'HHGHHMjshjskksjks',
          'description': u'Cras justo odio dapibus ac facilisis in egestas eget qua ', 
          'location':'jkknxjnj',
          'category':'party',
          'rsvp': False,
          'event_owner':1
        },

        {
          'id': 2,
          'title': u'khjhjshjsjhdndjdh',
          'description': u'jhhnbsbnsbj', 
          'location':'jhjhsjhjhsjhjdhsd',
          'category':'party',
          'rsvp': False,
          'event_owner':2
        },

        {
          'id': 3,
          'title': u'jhjshjsdhjshdjshjsd',
          'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
          'location':'kjkshjhjhjbsnbsd',
          'category':'party',
          'rsvp': False,
          'event_owner':2
        },

        {
          'id': 4,
          'title': u'jjhjshjhsjhjshjjhjhd',
          'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
          'location':'kjisisiisdsds',
          'category':'party',
          'rsvp': False,
          'event_owner':2
          },

          {
            'id': 5,
            'title': u'uiujsdshuuihuyksjhjs',
            'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
            'location':'sjnsisuis',
            'category':'party',
            'rsvp': False,
            'event_owner':2
          },

          {
          'id': 6,
          'title': u'iusijksuiksuhj suyuys jhu ',
          'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
          'location':'isuisiiws',
          'category':'party',
          'rsvp': False,
          'event_owner':2
          },

          {
          'id': 7,
          'title': u'jujusi jsuoios jshuysd',
          'description': u'Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec  elit non mi porta gravida at eget metus.', 
          'location':'area h',
          'category':'party',
          'rsvp': False,
          'event_owner':2
          },
    ]

Upvotes: 1

Views: 447

Answers (3)

Rushikesh Bharad
Rushikesh Bharad

Reputation: 1010

Please try below snippet:

this.props.heda.map((evVal, evKey) => {
    return evVal.map((postVal, postKey) => {
        ...
    }
}

Now this.props.heda[evKey][postKey] will give you the expected object.

Upvotes: 0

Pinki Gupta
Pinki Gupta

Reputation: 18

Because he is not able to find id in this.props.heda[evKey][post] object. So firstly you should console your this.props.heda[evKey][post] object after that I think you will get your actual problem.

Upvotes: 0

Jason Athanasoglou
Jason Athanasoglou

Reputation: 139

With [...Array(this.props.heda[evKey][post])] you create an array which has as the first element the array this.props.heda[evKey][post]).

Maybe you wanted to say [...this.props.heda[evKey][post]] to create a clone of the array?

Upvotes: 1

Related Questions