TypeError: Cannot read property 'nam' of undefined

Question

I am looking for an answer about a problem with React. I have this error when I click on a checkbox:

TypeError: Cannot read property 'nam' of undefined
Checkbox._this.change
:42
  39 |    let na=[event.target.name]
  40 |     for(let i=0; i<=this.state.data.length;i++){
  41 | 
> 42 |         if(na==this.state.data[i].nam){
     | ^  43 |     
  44 | this.setState({
  45 |     [this.state.data[i].che]:!this.state.data[i].che

I have three components:

App
Checkbox
Check

This is the code of "Check" components:

import React from 'react'

class Check extends React.Component {

    constructor(props) {
        super(props)
    }



    render() {



        return (

            <div>
                {this.props.name}<input type="checkbox" checked={this.props.checked}
                    onChange={this.props.onChange} name={this.props.name} /><br />

            </div>
        )


    }
}

export default Check;

And this is the code of Checkbox component:

import React from 'react';
import Check from './Check.js';

class Checkbox extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            data: [{


                nam: "jill",
                che: false

            },
            {
                nam: "jon",
                che: false
            }
            ]



        }

        console.log(this.state.data)
        this.change = this.change.bind(this);



        let d = this.state.data


    }


    change = (event) => {
        let na = [event.target.name]
        for (let i = 0; i <= this.state.data.length; i++) {

            if (na == this.state.data[i].nam) {

                this.setState({
                    [this.state.data[i].che]: !this.state.data[i].che
                })
            }
            console.log(na)
            console.log(event.target.checked)
        }
    }



    render() {

        let d = [{}];
        d = this.state.data;

        console.log(this.state.data)
        // console.log(this.listar(d))

        return (

            <div className="prova">


                {this.state.data.map(v => {
                    return (
                        <Check name={v.nam} checked={v.che} onChange={this.change} />

                    )
                })}



            </div>
        )


    }


}

Possible duplicate of [Can't access object property, even though it exists. Returns undefined](https://stackoverflow.com/questions/17546953/cant-access-object-property-even-though-it-exists-returns-undefined) — Praveen Kumar Purushothaman, Apr 25 '19 at 17:14
Hi Praveen! Thank you for your response. What i'm doing wrong in my code? — Catched, Apr 25 '19 at 17:16

score 1 · Accepted Answer · edited Apr 25 '19 at 18:51

Please try with just 'less than' operator while checking for length, like below

for(let i=0; i < this.state.data.length;i++)

The issue should be with the condition in for loop.

for(let i=0; i<=this.state.data.length;i++)

Here, the loop code will get executed even when i = 2, which is the length of array in your case, but since array indexes are 0 based, so

this.state.data[2] = undefined

And hence when we are trying to access 'nam' property in it, we get the mentioned error, because we are basically trying to find nam property in undefined.

I hope this helps.

TypeError: Cannot read property 'nam' of undefined

1 Answers1