CODEWITHSUNDEEP
reactjs
ItsMilann
ItsMilann

Reputation: 415

Cannot read property 'handleChange' of undefined

I'm new to react. I'm getting error above. What am I doing wrong?

Here's my code:

import React from "react"
import ReactDOM from "react-dom"
import toDoLists from "./components/Array"


class Main extends React.Component {
    render(){
        return (
        <p>
            <input type="checkbox" checked={this.props.completed} onChange={function(props){
                this.props.handleChange(this.props.id)
            }}
            />
            {this.props.task}
        </p>
        )
    }
}

class App extends React.Component {
    constructor(){
        super()
        this.state ={
            todos: toDoLists
        }
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(id) {
        console.log("Changed", id)
    }
    render() {
        const todoItems = this.state.todos.map(function(item){
            return(
                <Main
                    key={item.id} task={item.task} completed={item.completed} id={item.id}
                    handleChange={this.handleChange}
                />
                )
            
            })
        return (
            <div className="col-md-4 bg-dark container mt-5 p-3">
                {todoItems}
            </div>
            
        )
    }
}

ReactDOM.render(
    <App/>, document.getElementById("root")
)

Upvotes: 1

Views: 375

Answers (3)

Palani samy
Palani samy

Reputation: 113

import React from "react";
import ReactDOM from "react-dom";
 import toDoLists from "./components/Array"


class Main extends React.Component {
  render() {
    return (
      <p>
        Hai
        <input
          type="checkbox"
          checked={this.props.completed}
          onChange={props => {
            this.props.handleChange(this.props.id);
          }}
        />
        {this.props.task}
      </p>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      todos: toDoLists
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(id) {
    console.log("Changed", id);
  }
  render() {
    const todoItems = this.state.todos.map(item => {
      return (
        <Main
          key={item.id}
          task={item.task}
          completed={item.completed}
          id={item.id}
          handleChange={this.handleChange}
        />
      );
    });
    return (
      <div className="col-md-4 bg-dark container mt-5 p-3">{todoItems}</div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Inside the event function this value is undefined. or else you will pass the this instance to the selected function . Either u can use Arrow function

 onChange={props => {
            this.props.handleChange(this.props.id);
          }}

Upvotes: 1

Edgar Henriquez
Edgar Henriquez

Reputation: 1383

The problem is in your App component declaration. A class that extends React.Component receives props in the constructor, you have to pass that variable props to super() to properly call the Parent's class (React.Component), something like this:

  constructor(props) {
    super(props);
    //Continue with your state/binding
  }

I also see an issue inside .map either bind that function

  const todoItems = this.state.todos.map(function(item){
    return(
      <Main
        key={item.id}
        task={item.task}
        completed={item.completed}
        id={item.id}
        handleChange={this.handleChange}
      />
    )
   }.bind(this))
  //rest of your code

or better yet, use an arrow function.

  const todoItems = this.state.todos.map((item) => (
    <Main
      key={item.id}
      task={item.task}
      completed={item.completed}
      id={item.id}
      handleChange={this.handleChange}
    />
  ));
  //rest of your code

Upvotes: 1

Egor Trussov
Egor Trussov

Reputation: 33

When you are rendering the component, do: handleChange={(id) => this.handleChange(id)} and when you want to run the function in this component, do this.props.handleChange(this.props.id)

Upvotes: 0

Related Questions