Line 17:20: 'count' is not defined no-undef

user_16457594 0
Viewed 459

I'm trying to display count per click using the button but I ran into a problem with my code. When I run my code, it fails to compile, but when you inspect the page you can see the time being displayed. Here's my code.

import React from 'react'
export default class Profile extends React.Component{
    constructor(){
        super();
        this.state={
            name:'Abdur Rehman',
            email: 'abdur@gmail.com',
            count: 0,
        }
    }
    test(){
        this.setState({
            name: 'Jamal',
            email: 'jamal123@gmail.com',
            count: count+1
            }
        )
    }
    render(){
        return(
            <div>
                <h1>hello {this.state.name}</h1>
                <h1>Email: {this.state.email}</h1>
                <h1>Count: {this.state.count}</h1>
                <button onClick={()=>{this.test()}}>Update Name</button>
            </div>
        );
    }
}
compiler-errors compilation javascript
2 Answers

I'm not sure why it would fail to compile but I can spot a logic error in your test method.

count: count+1

should be:

count: this.state.count+1

or better yet:

count: this.state.count++

This is because you need to remember to reference the instance of the class Profile using the "this" keyword. This is necessary because any assignment needs to reference the explicit path the count variable is stored at, i.e this.state.count.

see if this does anything for you :)

user_114514200

import previous state, also dont mutate the this.state variable outside of the constructor function, use this.setState in the test function, this will also rerender the component

import React from 'react'
export default class Profile extends React.Component{
    constructor(){
        super();
        this.state={
            name:'Abdur Rehman',
            email: 'abdur@gmail.com',
            count: 0,
        }
    }
    test(){
        this.setState({
            ...this.state,
            name: 'Jamal',
            email: 'jamal123@gmail.com',
            count: this.state.count + 1
            }
        )
    }
    render(){
        return(
            <div>
                <h1>hello {this.state.name}</h1>
                <h1>Email: {this.state.email}</h1>
                <h1>Count: {this.state.count}</h1>
                <button onClick={()=>{this.test()}}>Update Name</button>
            </div>
        );
    }
}
user_66518400
Related