How to Create Different Outputs Based On State Values

Question

I am trying to create a quiz system where selecting different options will result in different outputs, however, the output is always rendered the same. What's the issue?

A user chooses between button 1 and 2, and then 3 and 4. He makes two choices which sets a particular state for this scenario. Eg. choosing 1 and 3 results in ['a','c']. When the output button is pressed, it will check against all the option results and console.log the output for the specific scenario.

import React from "react";
import ReactDOM from "react-dom";
import stylesheet from "./stylesheet.css";

class App extends React.Component {
constructor(props) {
super(props);
this.state = { myArray: [] };
}

firstHandler = () => {
  this.setState(previousState => ({
    myArray: [...previousState.myArray, "a"]
  }));
};
 secondHandler = () => {
  this.setState(previousState => ({
    myArray: [...previousState.myArray, "b"]
  }));
 };
 thirdHandler = () => {
   this.setState(previousState => ({
   myArray: [...previousState.myArray, "c"]
   }));
  };
  fourthHandler = () => {
  this.setState(previousState => ({
    myArray: [...previousState.myArray, "d"]
  }));
  };

  output = () => {
   const ar1 = [];
    if (this.state.myArray.values === ar1.values) {
   return console.log("Death");
   } else if (this.state.myArray.values === ["a", "b"].values) {
   return console.log("Life");
   } else if (this.state.myArray.values === ["a", "d"].values) {
   return console.log("Wealth");
    } else {
  return console.log("Dispair");
     }
  };
   render() {
    return (
      <div>
       <div className="row-one">
      <button className="option-one" onClick={this.firstHandler}>
        button 1
      </button>
      <button className="option-two" onClick={this.secondHandler}>
        button 2
      </button>
     </div>
     <div className="row-two">
       <button className="option-three" onClick={this.thirdHandler}>
         button 1
       </button>
       <button className="option-four" onClick={this.fourthHandler}>
         button 2
        </button>
       </div>
        <div>{this.state.myArray}</div>
      <button onClick={this.output}>...</button>
     </div>
     );
       }
    }

  ReactDOM.render(<App />, document.getElementById("root"));

Keeps on outputting 'Death' regardless of the options chosen

score 0 · Answer 1 · answered Jan 24 '19 at 00:12

The problem you're having is that, you think .values function from array returns a representation of array values that you can compare against other, while that's not the case. values() returns an iterator for the values of an array, as you can see here.

You have several options for comparing array values. I would suggest a simple approach of performing a sort and then generating string representation of array values. Replace your method output with the following:

  output = () => {
    const ar1 = [];
    let newArra = this.state.myArray.slice().sort().toString();

    if (newArra === ar1.toString()) {
      return console.log("Death");
    } else if (newArra === ["a", "b"].toString()) {
      return console.log("Life");
    } else if (newArra === ["a", "d"].toString()) {
      return console.log("Wealth");
    } else {
      return console.log("Dispair");
    }
  };

score 0 · Answer 2 · answered Jan 24 '19 at 00:19

the reason for the death... is that the first if statement is always true since this.state.myArray.values and ar1.values are undefined which result to true based on this expression this.state.myArray.values === ar1.values see help below :


output = () => {
    // const ar1 = [];
    const myArray = this.state.myArray;

    // check the lenth if 0 then 'death'
    if (!myArray.length) {
      return console.log("Death");
    } else {
      // if you want the array to have only two values uncomment below code
      // myArray.length = 2;
      if (myArray.includes("a") && myArray.includes("b")) {
        return console.log("Life");
      } else if (myArray.includes("a") && myArray.includes("d")) {
        return console.log("Wealth");
      } else {
        return console.log("Dispair");
      }
    }
  };

score 0 · Answer 3 · answered Jan 24 '19 at 00:21

Your if condition is wrong, mostly because the way you try to access the array values is wrong. The array comparison:

if (this.state.myArray.values === ar1.values) {
      return console.log("Death");
}

will be always be true. This is because this.state.myArray.values is a Array class function, and you are comparing it with the Array class function from ar1. Obviously, they are the same, and that's why you always receive true on that condition. What you mean to use here is:

if (this.state.myArray.values() === ar1.values()) {
      return console.log("Death");
}

but that will not work either, because Array.values() returns a new array operator with the content of the array, and the identity operator === will return false since they are different arrays even when the contents is the same. (Even if you compare ar1.values() === ar1.values() will return false). In case you wonder, the equality operator == will not work either.

In general, array content comparison in javascript is not something easy to do. I would recommend you to use another approach, like using different FLAGS, or an object. But if you still preferring keep using array comparison, take a look to How to compare arrays in JavaScript?

How to Create Different Outputs Based On State Values

3 Answers3