Javascript, ReactJs setState not working

Question

I am learning react and I have this tutorial online quiz-react, so i try to make few adjustment, I want user to click on HellYa it will increment for example answers type - "Brown" "D" "JP" each by +1, this is my quizQuestion.js

{
 question: "I am task oriented in order to achieve certain goals",
 answers: [
  {
    type: "Brown,D,JP",
    content: "Hell Ya!"
  },
  {
    type: " ",
    content: "Nah"
  }
 ]
},

My Constructor for init state is as follow

this.state = {
  counter: 0,
  questionId: 1,
  question: '',
  answerOptions: [],
  answer: '',
  answersCount: {
    Green: 0,
    Brown: 0,
    Blue: 0,
    Red: 0,
    A: 0,
    B: 0,
    C: 0,
    D: 0,
    EI: 0,
    SN: 0,
    TF: 0,
    JP: 0
  },
  result: ''
};

and following the tutorial, i am using react-addons-update for updating the answerCount and answer, here is my function

setUserAnswer(answer) {
 if (answer.trim()) {
   const answer_array = answer.split(',');
   let updatedAnswersCount = null;
   answer_array.forEach((answer) => {
     updatedAnswersCount = update(this.state.answersCount, {
      [answer]: {$apply: (currentValue) => currentValue + 1}
    });
  }, this);
  this.setState({
    answersCount: updatedAnswersCount,
    answer: answer
  });
 }
}

But after several attempts i still cannot figure out how to individually increment answer type by 1, right now it only update JP +1 for example but it does not update Brown and D, what should i do? thanks

Rafael Freitas da Silva · Accepted Answer · 2017-10-04 20:42:04Z

1

It seems it is always using the current state as the base object, so only the last answer inside the foreach will be updated.

Try the following:

setUserAnswer(answer) {
 if (answer.trim()) {
   const answer_array = answer.split(',');
   let answerCountUpdates = update(this.state.answersCount, {$merge: {}}) // copy this.state.answersCount, will search a better way

   answer_array.forEach((answer) => {
     answerCountUpdates = update(answerCountUpdates, {
      [answer]: {$apply: (currentValue) => currentValue + 1}
     });
   }, this);

   updatedAnswersCount = update(this.state.answersCount, {$merge: answerCountUpdates})

   this.setState({
     answersCount: updatedAnswersCount,
     answer: answer
   });
  }
}

edited Oct 4, 2017 at 20:42

answered Oct 4, 2017 at 20:30

Rafael Freitas da Silva

265 bronze badges

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

Comments

T Porter · Accepted Answer · 2017-10-04 20:27:39Z

0

It looks like you've named your forEach()'s iteration object "answer" as well as the parameter passed in to setUserAnswer(). Try changing one of these, as it's probably causing problems.

answered Oct 4, 2017 at 20:27

T Porter

1,2819 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript, ReactJs setState not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related