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

Question

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;

do var todoEntries = this.props.entries || []; you don't have items in state in your TodoList component. — Junius L
– Junius L, Commented May 26, 2019 at 21:05
the problem is solved but it is not taking the entries and displaying them. — Aishwarya
– Aishwarya, Commented May 26, 2019 at 21:15

tkore · Accepted Answer · 2019-05-26 21:08:03Z

1

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: []
  }
}

answered May 26, 2019 at 21:08

tkore

1,15113 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aishwarya Over a year ago

class TodoList extends Component { constructor(props){ super(props); this.state = { item: [] }; this.additem = this.additem.bind(this); } this is my code and yes i made sure it is an array

Andrii Golubenko Over a year ago

@Aishwarya item is not items

tkore Over a year ago

@Aishwarya you wrote item while the correct word according to your code is items. Try fixing that

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related