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

2 Answers 2

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