“TypeError：无法读取未定义的属性'过滤器'”在reactjs中

Question

I tried to create oop reactjs and when I'm finished create parent and child class found error "TypeError: Cannot read property 'filter' of undefined". this is my first child class code

//child component
//only one feature


import React, {Component} from 'react';

export class TodoBanner extends Component
{
    render=() =>
    <h4 className="bg-primary text-white text-center p-2">
        {this.props.name }'s Todo List
        ({this.props.tasks.filter(t=> !t.done).length} item to do)
    </h4>
}

this my second child class code

//child component
//only one feature


import React, {Component} from 'react';

export class TodoRow extends Component
{
    render=() =>

        <tr>
            <td>{ this.props.item.action}</td>
            <td>
                <input type="checkbox" checked={this.props.item.done}
                onChange={()=> this.props.callback(this.props.item)}/>
            </td>
        </tr>
}

this my third child class code

//child component
//only one feature


import React, {Component} from 'react';

export class TodoRow extends Component
{
    constructor(props)
    {
        super(props);
        this.state= {   newItemText: " "}
    }


    updateNewTextValue = (event) =>
    {
        this.setState({ newItemText : event.target.value });
    }

    createNewTodo = () =>
    {
        this.props.callback(this.state.newItemText)
        this.setState({newItemText: ""});
    }

    render = () =>

        <div className="my-1">
            <input className="form-control" value={this.state.newItemText}
            onChange={this.updateNewTextValue}/>

            <button className="btn btn-primary mt-1"
            onClick={this.createNewTodo}>
                Add Todo Task

            </button>
        </div>

}

and this is my app.js code

import React , {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';

//import child component to parent compnent
import {TodoBanner} from "./TodoBanner";
import {TodoRow} from "./TodoRow";
import {TodoCreater} from "./TodoCreater";

export default class App extends Component
{
  constructor(props)
  {
    super(props);
    this.state=
    {
      userName : "Rafiansyah",
      todoItems : [{action : "Buy a flowers", done: false},
                   {action : "Do a Worukout", done: true},
                   {action : "Study Programming", done: false},
                   {action : "Read a Books", done: true}]
    }
   }


  updateNewTextValue = (event) =>
  {
    this.setState({ newItemText : event.target.value });
  }


  createNewTodo = (task) =>
  {
    if(!this.state.todoItems
            .find(item => item.action === task))
            {
              //SPREAD PERIOD EXPAND ARRAY
              this.setState({
                  todoItems : [...this.state.todoItems,
                              {action : task, 
                              done: false}]

                });
            }
  }


  toggleTodo = (todo) => this.setState
  ({  todoItems : this.state.todoItems.map  
      (item => item.action === todo.action ?
          {   ...item, done: !item.done}: item  )});


  todoTableRows =() => this.state.todoItems.map
  ( item=> 
    <TodoRow key={item.action} item={item}
    callback={this.toggleTodo}/>
                      );


  render = () =>
    <div>
    <TodoBanner name={this.state.userName}
                taks={this.todoItems}/>


    <div className="continer-fluid">
      <TodoCreater callback={this.createNewTodo}/>


      <table className="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Todo Task Name</th>
                <th> Done </th>
              </tr>
            </thead>

            <tbody>
              {this.todoTableRows()}
            </tbody>



      </table>
    </div>
    </div>
}

please help me I'm really new in reactjs. I really appreciate for any answer

Answer 1

Make sure your array has a value

You are trying to get the array value of undefined (tasks). before trying to use tasks make sure there's a value.

this.props.tasks && this.props.tasks.length && this.props.tasks.filter(...