How Can I check if both Arrays inside this.state contains same value?

Question

I have two Arrays , One contains the index number of correct answer correctAnswers

And userAnswers contain the index number of answer selected by the user

How Can I check if Both of them have a same value on the index , If yes then add +1 to the Total

    this.state = {
        correctAnswers: [], // [1, 2, 3, 1, 2, 1, 3, 3, 4, 3]
        userAnswers: [],    // [1, 3, 1, 2, 2, 1, 1, 3, 4, 3]
        Total: 0
    };

So in Above case Total should be Total =6

My attempt :

const correctAnswers = this.state.correctAnswers;
    const userAnswers = this.state.userAnswers;

    compareAnswers() {
    for (var i = 0; i < correctAnswers.length; i++) {
        if (correctAnswers[i] === userAnswers[i]) {
            this.setState({ Total: +1 });
        } else console.log("ITS NOT A RIGHT ANSWER ");
    }
   }

Answer 1

Okay, since it's an array inside of an object, and the actual object has a this reference, we have to accommodate that.

  for(var i=0;i<this.state.correctAnswers.length;i++){
  if(this.state.correctAnswers[i] === this.state.userAnswers[i]){
    this.state.Total++;
  }
}

Using this method, we can dynamically compare both arrays. Hope this helps!

Answer 2

Your attempt looks good, except that it has a syntax error (you can't do Total: +1 like that). Instead you could use the functional setState syntax, which for your snippet would look like:

compareAnswers() {
    for (var i = 0; i < correctAnswers.length; i++) {
        if (correctAnswers[i] === userAnswers[i]) {
            this.setState(oldState => ({...oldState, Total: oldState.Total++}));
        } else console.log("ITS NOT A RIGHT ANSWER ");
    }
}

However, it would probably be better to batch all the sums and only set the state once when we're done , which would look like:

compareAnswers() {
    let newTotal = 0;
    for (var i = 0; i < correctAnswers.length; i++) {
        if (correctAnswers[i] === userAnswers[i]) {
            newTotal++;
        } else console.log("ITS NOT A RIGHT ANSWER ");
    }

    this.setState({Total: newTotal})
}

Answer 3

My attempt based on assumption that all the questions are mandatory and would be answered sequentially by the user:

compareAnswer() {
    // Addressing the best case i.e. when all user answers are correct
    if (JSON.stringify(this.state.correctAnswers) == JSON.stringify(this.state.userAnswers)) {
           this.setState({ Total: this.state.correctAnswers.length });
    } else {
           for (var i=0; i<this.state.userAnswers.length; i++) {
               if (this.state.correctAnswers[i] === this.state.userAnswers[i]) {
                  this.setState({ Total: this.state.Total++ });
               }
           }
    }
}

Answer 4

Add a method to the object you already have:

 let state = { correctAnswers: [1, 2, 3, 1, 2, 1, 3, 3, 4, 3], userAnswers: [1, 3, 1, 2, 2, 1, 1, 3, 4, 3], Total: 0, evalScore() { this.correctAnswers.forEach((answer, index) => { if (answer === this.userAnswers[index]) { this.Total++ } }) } } state.evalScore(); console.log(state.Total); 

You can even use Total property for this and make it work like a computed property:

 let state = { correctAnswers: [1, 2, 3, 1, 2, 1, 3, 3, 4, 3], userAnswers: [1, 3, 1, 2, 2, 1, 1, 3, 4, 3], Total() { // make sure both array have the same number of elements if(this.correctAnswers.length !== this.userAnswers.length) { return null; } let total = 0 this.correctAnswers.forEach((answer, index) => { if (answer === this.userAnswers[index]) { total++ } }) return total } } console.log(state.Total()); 

Edit: Google Chrome Screenshot

Answer 5

You can use forEach and a ternary condition:

state.Total += (c === state.correctAnswers[i] ? 1 : 0)

 var state = { correctAnswers: [1, 2, 3, 1, 2, 1, 3, 3, 4, 3], userAnswers: [1, 3, 1, 2, 2, 1, 1, 3, 4, 3], Total: 0 }; state.userAnswers.forEach((c, i) => state.Total += (c === state.correctAnswers[i] ? 1 : 0)); console.log(state) 

 .as-console-wrapper { max-height: 100% !important; top: 0; }