Szymon Dzumak Szymon Dzumak - 1 month ago 31
React JSX Question

React Handling Events

Simple todo list. I want to add a delete function but getting error:


proxyConsole.js:56 Warning: setState(...): Cannot update during an existing state transition (such as within
render
or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to
componentWillMount
.


I might meesed with the binding as I try to get a grasp of it.

class App extends Component {
constructor(props) {
super(props);
this.onDelete = this.onDelete.bind(this);
this.state = {
todos: ['wash up', 'eat some cheese', 'take a nap'],
};
}

render() {
var todos = this.state.todos;
todos = todos.map(function(item, index){
return(
<TodoItem item={item} key={index} onDelete={this.onDelete}/>
)
}.bind(this));

return (
<div className="App">
<ul>
{todos}
</ul>
</div>
);
}

onDelete(item){
var updatedTodos = this.state.todos.filter(function(val, index){
return item !== val;
});
this.setState({
todos:updatedTodos
});
}
}

class TodoItem extends Component {
constructor(props) {
super(props);
this.handleDelete = this.handleDelete(this);

}

render(){
return(
<li>
<div className="todo-item">
<span className="item-name">{this.props.item}</span>
<span className="item-delete" onClick={this.handleDelete}> x</span>
</div>
</li>
);
}

handleDelete(){
this.props.onDelete(this.props.item);
}
}

Dev Dev
Answer Source

I think you are invoking handleDelete handler in child component's constructor. It should be :

this.handleDelete = this.handleDelete.bind(this);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onDelete = this.onDelete.bind(this);
    this.state = {
      todos: ["wash up", "eat some cheese", "take a nap"]
    };
  }

  render() {
    var todos = this.state.todos;
    todos = todos.map(
      function(item, index) {
        return <TodoItem item={item} key={index} onDelete={this.onDelete} />;
      }.bind(this)
    );

    return (
      <div className="App">
        <ul>
          {todos}
        </ul>
      </div>
    );
  }

  onDelete(item) {
    var updatedTodos = this.state.todos.filter(function(val, index) {
      return item !== val;
    });
    this.setState({
      todos: updatedTodos
    });
  }
}

class TodoItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleDelete = this.handleDelete.bind(this);
  }

  render() {
    return (
      <li>
        <div className="todo-item">
          <span className="item-name">{this.props.item}</span>
          <span className="item-delete" onClick={this.handleDelete}> x</span>
        </div>
      </li>
    );
  }

  handleDelete() {
    this.props.onDelete(this.props.item);
  }
}

ReactDOM.render(<App />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>