CODEWITHSUNDEEP
node.jsreactjs
Aishwarya
Aishwarya

Reputation: 1

Problem with: TypeError: Cannot read property 'map' of undefined

I was goin through some tutorial, and i got into an issue with The error 'cannot read property 'map' of undefined'.Please help me with the following code.

TypeError: Cannot read property 'map' of undefined TodoItems.render C:/Users/hp/Desktop/todo_list/src/TodoItems.js:10

 7 | 
   8 |    render(){
   9 |        var todoEntries = this.props.entries;
> 10 |        var listItems = todoEntries.map(this.createTasks);
     | ^  11 | 
  12 |        return (
  13 |            <ul className="theList">
View compiled
▶ 23 stack frames were collapsed.

import React, { Component } from "react";

class TodoItems extends Component{
    createTasks(item) {
        return <li key={item.key}>{item.text}</li>
    }

    render(){
        var todoEntries = this.props.entries;
        var listItems = todoEntries.map(this.createTasks);

        return (
            <ul className="theList">
                {listItems}
            </ul>
        );
    }
}

export default TodoItems;


and the TodoList file code is:
render() {
        return (
            <div className="todoListMain">
            <div className="header">
                <form onSubmit={this.addItem}>
                    <input ref={(a) => this._inputElement = a}
                         placeholder="enter task">
                    </input>
                    <button type="submit">add</button>
                </form>
            </div>
            <TodoItems entries={this.state.items}/>
        </div>
        );
    }
}

export default TodoList;

Upvotes: 0

Views: 704

Answers (1)

tkore
tkore

Reputation: 1151

You're trying to pass this.state.items as entries, but it seems that it's not an array but undefined.

You could just make it an array by default by doing something like the following -

class MyComponent extends Component {
  state = {
    items: []
  }
}

Upvotes: 1

Related Questions