Dispatch action to remove from array error

Question

I am trying to dispatch an action that removes an element from an array, I get the error message:

Warning: setState(...): Cannot update during an existing state transition (such as within render

   removeAchievement(achievement){
        this.props.removeAchievement({
           type: 'REMOVE_ACHIEVEMENT',
            id: this.props.day.id,
            text: achievement,
    })
  }

  render() {

    let listItems

    if(this.props.day.achievements) {
       listItems = this.props.day.achievements.map((achievement) => (
           <div className="cell" key={achievement + "_achievements"}>
             {achievement}
                 <div className="buttons">
                      <a href="#" onClick={this.openAchievementModal} className="edit">
                        <Icon name="pencil-square" size="3x" />
                      </a>
                      <a href="#" onClick={this.removeAchievement(achievement)} className="remove">
                        <Icon name="trash-o" size="3x" />
                      </a>
            </div>
           </div>
       ))
    }

How can I get the text into my action when I dispatch it?

Davin Tryon · Accepted Answer · 2017-05-31 19:13:13Z

2

You want to set the onClick handler to a function, not to result of calling the function:

          <a href="#" onClick={() => this.removeAchievement(achievement)} className="remove">
            <Icon name="trash-o" size="3x" />
          </a>

answered May 31, 2017 at 19:13

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

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

Collectives™ on Stack Overflow

Dispatch action to remove from array error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related