javascript - this.state.items.map is not a function - Stack Overflow

I do console.log(items) I got ['a','b','c'] but I got error of map is not a function.

..    
    var Todo_list = React.createClass({
      getInitialState(){
        return { items:['a','b']}
      },
      addItem(item){
      this.setState({items:this.state.items.push(item)})
        console.log(this.state.items) // this is working
      },
      render() {
        return (
        <div>
         <TodoInput addItem={this.addItem} />

         {this.state.items.map((item,i) =>  <li key={i}>{item}</li> )}
         </div>
        );
      }
    });
..

/ Try to add an item, I wonder why, I guess I've pushed it correctly?

I do console.log(items) I got ['a','b','c'] but I got error of map is not a function.

..    
    var Todo_list = React.createClass({
      getInitialState(){
        return { items:['a','b']}
      },
      addItem(item){
      this.setState({items:this.state.items.push(item)})
        console.log(this.state.items) // this is working
      },
      render() {
        return (
        <div>
         <TodoInput addItem={this.addItem} />

         {this.state.items.map((item,i) =>  <li key={i}>{item}</li> )}
         </div>
        );
      }
    });
..

https://jsfiddle/tehwajh2/ Try to add an item, I wonder why, I guess I've pushed it correctly?

• javascript
• reactjs

Share Improve this question Follow asked Oct 4, 2016 at 14:59 Thian Kian PhinThian Kian Phin 93133 gold badges1313 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

In this case you can use .concat instead of .push, because .push returns the new length of the array., length is Number, and Number does not have .map method that's why you get error

 this.setState({ items: this.state.items.concat(item) })

Example

The push() method adds one or more elements to the end of an array and returns the new length of the array.

The concat() method returns a new array prised of the array on which it is called joined with the array(s) and/or value(s) provided as arguments.

You can try adding this.state.items.push(item); seperately. It works

var TodoInput = React.createClass({
    handleAddItem(){
        var todo_val = this.refs.todo_val.value;
      this.props.addItem(todo_val);
  },
  render() {
    return (
    <div>
     <input ref='todo_val' type="text" />
     <button onClick={this.handleAddItem}>Add</button>
     </div>
    );
  }
});

var Todo_list = React.createClass({
  getInitialState(){
    return { items:['a','b']}
  },
  addItem(item){
  console.log(item);
 this.state.items.push(item);
  this.setState({items: this.state.items});
    console.log(this.state.items) 
  },
  render() {
    return (
    <div>
     <TodoInput addItem={this.addItem} />
     {this.state.items.map(function(item, key) {
        return (
        <li key={key}> {item}</li>
      )

     })}
     </div>
    );
  }
});

ReactDOM.render(
  <div>
  <Todo_list />
  </div>,
  document.getElementById('container')
);

JSFIDDLE