CODEWITHSUNDEEP
javascriptreactjs
Kirill
Kirill

Reputation: 217

RangeError: Maximum call stack size exceeded after using .map

I'm trying to show the list of todos but having trouble with Maximum call stack size exceeded after using .map. Can someone tell me what the problem is? 

import React, { Component } from 'react';
import './todo.css';

export default class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = { todos: ['to do one thing', 'to do another thing'] };
  }

  showTodos() {
    return this.state.todos.map((todo) => (
      <Todo key={todo} todo={todo} />
    ));
  }

  render() {

    return (
      <div className={'container'}>
        {this.showTodos()}
      </div>
    )
  }
}

Upvotes: 0

Views: 676

Answers (1)

Julien Collet
Julien Collet

Reputation: 46

It's because you are rendering the Todo element itself in your showTodos() method, so you try to render a list of Todo list of Todo list of Todo list,...

Instead, render a new div element like this :

  showTodos() {
    return this.state.todos.map((todo) => (
      <div key={todo}>{todo}</div>
    ));
  }

Upvotes: 2

Related Questions