CODEWITHSUNDEEP
reactjsredux
Bomber
Bomber

Reputation: 10947

Dispatch action to remove from array error

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?

Upvotes: 0

Views: 50

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67296

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>

Upvotes: 2

Related Questions