CODEWITHSUNDEEP
javascriptreactjs
slow rarrih
slow rarrih

Reputation: 11

TypeError: props.handleToggle is not a function

I write my first Todo app on React. I get TypeError: props.handleToggle is not a function and don't understand why?(another handlers are working). Why this function can't be a function? What I'm doing wrong and what I need to read?

App.js

import React, { Component } from 'react';
import {TodoForm, TodoList} from './components/todo'
import {addTodo, generateId, findById, toggleTodo, updateTodo} from    './lib/todoHelpers'

class App extends Component {
  state = {
    todos: [
      {id: 1, name: 'Hello buddy', isComplete: true},
      {id: 2, name: 'Hello rarrih', isComplete: false}
    ],
    currentTodo: ''
  }

  handleToggle = (id) => {
    const todo = findById(id, this.state.todos)
    const toggled = toggleTodo(todo)
    const updatedTodos = updateTodo(this.state.todos, toggled)
    this.setState({todos: updatedTodos})
  }

  render(){
    const submitHandler = this.state.currentTodo ? this.handleSubmit : this.handleEmptySubmit
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Todo</h1>
        </div>

        <div className="Todo-App">
          {this.state.errorMessage && <span className='error'>{this.state.errorMessage}</span>}
          <TodoForm handleInputChange={this.handleInputChange}
            currentTodo={this.state.currentTodo}
            handleSubmit={submitHandler}/>

          <TodoList handleToggle={this.handleToggle} todos={this.state.todos}/>
        </div>
      </div>
    );
  }
}

export default App;

TodoList.js

import React from 'react'
import {TodoItem} from './TodoItem'
import PropTypes from 'prop-types'

export const TodoList = (props) => {
  return (
    <div className="Todo=List">
      <ul>
        {props.todos.map(todo => <TodoItem handleToggle={props.handleTooggle} key={todo.id} {...todo}/>)}
      </ul>
    </div>
  )
}

TodoItem.js

//TodoItem
export const TodoItem = (props) => {
  const handleToggle = props.handleToggle(props.id)
  return (
    <li>
      <input type="checkbox" onChange={handleToggle}
       checked={props.isComplete}/> {props.name}
    </li>
  )
}

I get TypeError: props.handleToggle is not a function and don't understand why?(another handlers are working). Why this function can't be a function? What I'm doing wrong and what I need to read?

Upvotes: 0

Views: 2701

Answers (1)

Artem Mirchenko
Artem Mirchenko

Reputation: 2170

You have mistake in TodoList.js, you pass on it prop name handleToggle, and tries to use handleTooggle.

This is a correct variant: 

export const TodoList = (props) => {
  return (
    <div className="Todo=List">
      <ul>
        {props.todos.map(todo => <TodoItem handleToggle={props.handleToggle} key={todo.id} {...todo}/>)}
      </ul>
    </div>
  )
}

Upvotes: 1

Related Questions