React Array wont update, when adding items to it

Question

I have made To-Do list with react, but when I submit new entry, it wont show on the list. I have no clue where the problem is.

class TodoList extends React.Component {
  constructor(){
    super();

This array doesn't get updated like it should:

    this.state ={
      items:["item1", "item2"]
    };
  }

Here I add new task:

  addTask = (task) => {
this.setState((prevState) => ({
  items: prevState.items.concat([task])
}));


}

  render(){
    return(
      <div>
        <AddTodo addNew ={this.addTask}/>
        <ShowEntries entries={this.state.items}/>
      </div>
    )
  }
}

class AddTodo extends React.Component {
  constructor(){
    super();
this.handeAddNew = this.handeAddNew.bind(this);
    this.state ={
      task: ""
    };
  }

Here I update the state, it works fine:

  update(e){
    this.setState({
      task: e.target.value
    });
  }

Here I have passed the addTask function as a prop. This might be where the problem is?

  handeAddNew(){
    this.props.addNew(this.state.task);
    this.setState({
      task: ""
    });
  }

  render(){
    return(
      <div>
        <input type="text"
        onChange={this.update.bind(this)}></input>
        <button onClick={this.handleAddNew}>Add</button>
      </div>
    )
  }
}

ShowEntries class works fine too:

class ShowEntries extends React.Component{
  render(){
    var list =this.props.entries.map((task) =>{
      return <li>{task}</li>
    });
    return(
      <div>
        <ul>
          {list}
        </ul>
      </div>
    )
  }
}

export default TodoList

Any ideas?

godsenal · Accepted Answer · 2017-11-22 03:25:06Z

1

You should bind addTask function.

constructor(){
  super();
  this.addTask = this.addTask.bind(this);
}

Or change addTask to arrow function. like

addTask = (task) => {
  /* add task*/
}

handleAddNew also needs binding.

this.handleAddNew = this.handleAddNew.bind(this);

edited Nov 22, 2017 at 3:25

answered Nov 22, 2017 at 3:14

godsenal

3872 silver badges14 bronze badges

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

1 Comment

godsenal Over a year ago

I missed handleAddNew in AddTodo component... You should bind it too.

Dane · Accepted Answer · 2017-11-22 03:25:44Z

1

If you are relying on previous state to update the next state, you must use functional setState in React, like so:

  addTask = (task) => {
    this.setState((prevState) => ({
      items: prevState.items.concat([task])
    }));
  }

That, along with binding all functions used (preferrably inside the constructor itself), should solve your issue.

answered Nov 22, 2017 at 3:25

Dane

9,6135 gold badges38 silver badges58 bronze badges

5 Comments

Riku Over a year ago

what is that prevState attribute?

Dane Over a year ago

See reactjs.org/docs/…

Riku Over a year ago

thank you for letting me know from prevState, but unofortunately this didn't resolve my issue.

Dane Over a year ago

can you pleas share a working pen or fiddle so that we can debug your code ?

Dane Over a year ago

Ok why do you have items: prevState.items.concat([task]) instead of just items: prevState.items.concat(task) ? You are just passing a string ryt ? (although I think this is not the issue)

Joey · Accepted Answer · 2017-11-22 03:36:49Z

0

you misspelled handeAddNew.

make it handleAddNew also make sure you bind your methods handleAddNew = () => { //code }

answered Nov 22, 2017 at 3:36

Joey

1,1558 silver badges14 bronze badges

1 Comment

Joey Over a year ago

if thats the issue we shoould close this as a typo

Collectives™ on Stack Overflow

React Array wont update, when adding items to it

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related