javascript - RangeError: Maximum call stack size exceeded after using .map -

i'm trying show list of todos having trouble maximum call stack size exceeded after using .map. can tell me problem is?

import react, { component } 'react'; import './todo.css';  export default class todo extends component {   constructor(props) {     super(props);     this.state = { todos: ['to 1 thing', 'to thing'] };   }    showtodos() {     return this.state.todos.map((todo) => (       <todo key={todo} todo={todo} />     ));   }    render() {      return (       <div classname={'container'}>         {this.showtodos()}       </div>     )   } } 

it's because rendering todo element in showtodos() method, try render list of todo list of todo list of todo list,...

instead, render new div element :

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