TypeError: Cannot read property 'getAttendance' of undefined

uncaught typeerror: cannot read property 'type' of undefined
uncaught typeerror: cannot read property of null
typeerror: cannot read property 'value' of undefined react
typeerror: cannot read property of undefined typescript
typeerror: cannot read property of undefined react
typeerror: cannot read property of undefined nodejs
typeerror: cannot read property of undefined angular
typeerror: cannot read property 'create' of undefined

I have added a function getAttendance which should only be triggered if I click on a table row. If i define

<tr onclick={this.getAttendance} key={key}> It is working fine but if i change it to call my function to <tr onclick={this.getAttendance} key={key}> OR <tr onclick={()=>{this.getAttendance}} key={key}> Its throwing the above error .

import React, { Component } from 'react';
import './Attendance.css';
import { Link, withRouter } from 'react-router-dom';

//@ Redux
import { connect } from 'react-redux';
import propTypes from 'prop-types';
import { get_all_employees} from '../../../../store/actions/employeeActions';

export class Attendance extends Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        this.props.get_all_employees();
    }

    getAttendance = (e) => {
        e.preventDefault();
        console.log('Hello');
    }

  render() {
    const tbodylist = [];
    let i = 1;
    const { allemployee } = this.props.employee;
    Object.keys(allemployee).forEach(function(key) {
        console.log(key, allemployee[key]);
        let designation = (allemployee[key].designation === 'M')? 'Manager' : (allemployee[key].designation === 'AM') ? 'Assistant Manager' : (allemployee[key].designation === 'LAS') ? 'LAS' : null ;
        let val =    ( <tr onclick={this.getAttendance}   key={key}>
                        <th scope="row" className='text-uppercase vasp_th'>{i}</th>
                        <td  className='text-uppercase vasp_td'>{allemployee[key].employee_id}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].name}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].doj}</td>
                        <td className='text-uppercase vasp_td'>{designation}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].reporting_name}</td>
                    </tr>);
            tbodylist.push(val);
            i++;
    });

    return (
      <div className='container-fluid'>
        <div className='row'>
            <div className='col-lg'>
            {/**First Row */}
                <div className='row vasp_first_row'>
                    <div className='col-sm'>
                        <button className='btn btn-light bg-white px-4'>Filters</button>
                    </div>
                    <div className='col-sm-3'>
                        <Link className='links' to='/add-sales-person'><button className='btn btn_modified text-uppercase'><i className="fa fa-plus" aria-hidden="true"></i>&nbsp;Add Sales People</button></Link>
                    </div>
                </div>
                {/**First Row Ends*/}
            </div>
        </div>
        <div className='row'>
            <div className='col-lg vasp_second_col text-center'>
                {/** Second Row TABLES */}
                <table className="table table-borderless view_table">
                    <thead>
                        <tr>
                        <th scope="col" className='text-uppercase vasp_th'>Sr. No</th>
                        <th scope="col" className='text-uppercase vasp_th'>Employee Id</th>
                        <th scope="col" className='text-uppercase vasp_th'>Name</th>
                        <th scope="col" className='text-uppercase vasp_th'>Date of Joining</th>
                        <th scope="col" className='text-uppercase vasp_th'>Designation</th>
                        <th scope="col" className='text-uppercase vasp_th'>Reporting To</th>
                        </tr>
                    </thead>
                <tbody>
                    {tbodylist}
                </tbody>
                </table>
                {/**Second Row Ends */}
            </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state)=> ({
    employee:state.employee
})

export default connect(mapStateToProps,{get_all_employees})(withRouter(Attendance));

if you want to use the function

<tr onclick={()=>{this.getAttendance}}   key={key}>

like this. Try binding the function inside the constructor.

 constructor(props){
    super(props);
this.getAttendance=this.getAttendance.bind(this);
}

I hope this will work.

Thanks

Uncaught TypeError: Cannot read property of undefined In , Out of the six primitive types defined in JavaScript, namely boolean, string, symbol, number, Null, and undefined, no other type throws as many errors as� Uncaught TypeError: Cannot read property 'value' of null. Uncaught TypeError: Cannot read property 'innerHTML' of null. All this means is that you are trying to access a property of an object that is undefined. These usually happens when we don't test an object before using it. Here is a common scenario. // We want to get the value of an input.

I believe the problem is in your for each loop:

Object.keys(allemployee).forEach(function(key) { // HERE
        console.log(key, allemployee[key]);
        let designation = (allemployee[key].designation === 'M')? 'Manager' : (allemployee[key].designation === 'AM') ? 'Assistant Manager' : (allemployee[key].designation === 'LAS') ? 'LAS' : null ;
        let val =    ( <tr onclick={this.getAttendance}   key={key}>
                        <th scope="row" className='text-uppercase vasp_th'>{i}</th>
                        <td  className='text-uppercase vasp_td'>{allemployee[key].employee_id}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].name}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].doj}</td>
                        <td className='text-uppercase vasp_td'>{designation}</td>
                        <td className='text-uppercase vasp_td'>{allemployee[key].reporting_name}</td>
                    </tr>);
            tbodylist.push(val);
            i++;
    });

Declaring a function with the function keyword does not bind the local context, you can try to replace it with:

Object.keys(allemployee).forEach((key) => {

Avoiding those dang cannot read property of undefined errors , Uncaught TypeError: Cannot read property 'foo' of undefined. The dreaded error we all hit at some point in JavaScript development. Could be� Cannot read property 'addEventListener' of null. Ask Question Asked 5 years, [JS, html]Uncaught TypeError: Cannot read property 'addEventListener' of null. 0.

Your problem is with the anonymous function inside you

Object.keys(allemployee).forEach(function(key) { // HERE
    console.log(key, allemployee[key]);
    let designation = (allemployee[key].designation === 'M')? 'Manager' : (allemployee[key].designation === 'AM') ? 'Assistant Manager' : (allemployee[key].designation === 'LAS') ? 'LAS' : null ;
    let val =    ( <tr onclick={this.getAttendance}   key={key}>
                    <th scope="row" className='text-uppercase vasp_th'>{i}</th>
                    <td  className='text-uppercase vasp_td'>{allemployee[key].employee_id}</td>
                    <td className='text-uppercase vasp_td'>{allemployee[key].name}</td>
                    <td className='text-uppercase vasp_td'>{allemployee[key].doj}</td>
                    <td className='text-uppercase vasp_td'>{designation}</td>
                    <td className='text-uppercase vasp_td'>{allemployee[key].reporting_name}</td>
                </tr>);
        tbodylist.push(val);
        i++;
});

You are using function(key) which will bind this to the local context. This is not what you want.

You can either put this in a variable before calling Object.keys(allemployee).forEach(...)

const that = this;
Object.keys(allemployee).forEach(key => { // HERE
    //that.getAttendance
});

or you can use a fat arrow function

Object.keys(allemployee).forEach(key => { // HERE
    ...
});

Uncaught TypeError: Cannot read property 'value' of undefined , Seems like one of your values, with a property key of 'value' is undefined. Test that i1 , i2 and __i are defined before executing the if statements: Uncaught TypeError: Cannot read property 'value' of null HTML Form is correct. 3. Google Calendar API getting 'Cannot read property 'signIn' of null' 0.

TypeError: Cannot read property 'firstName' of undefined , I keep getting “TypeError: Cannot read property 'firstName' of undefined” and I cannot figure out what is going on. Does anyone have an idea? var bob� TypeError: Cannot read property 'classList' of null I am not really sure what am I doing wrong in manipulating DOM element for each form field. My form field has an stated name and ID of form and each input field has a name and id of the field as well.

Prevent “Cannot read property '…' of undefined” errors with , Every developer who did some JavaScript has got errors like “Cannot read property '…' of undefined”. There is one simple way to prevent them,� Uncaught TypeError: Cannot read property 'getUserMedia' of undefined at new WebRTCAdaptor (webrtc_adaptor.js:85) at (index):202. Copy link Quote reply Author

TypeError: Cannot read property 'name' of undefined � Issue #10803 , 0.0-beta.7 (from 5.3.18), when I run storybook I see an error. hooks.js:232 Uncaught TypeError: Cannot read property� TypeError: Cannot read property 'uid' of undefined #88. Closed rmwxiong opened this issue Sep 26, 2016 · 10 comments Closed TypeError: Cannot read property 'uid'

Comments
  • Possible duplicate of How to access the correct `this` inside a callback?
  • Not Working.Thanks for efforts