React.js - using props or children to compare

JavaScript
1

I made up my own project, a very simple activity for English Learners. The user selects the word that matches the displayed color.

I am having trouble getting the checkMatch() function to actually check if the user is correct by comparing this.state.backgroundColor to the word the user selected. I think I need to use props or children, but maybe I’m wrong.

I provided the code below. Here is the link to the full code, if that’s easier. https://codepen.io/jennnico/pen/GQPqXa?editors=1010

Here is a snippet of the relevant code:

//check if color and word match... not working. 
   //Trying to access the children or the id of the "color" div rendered below.
  //I have tried: this.props.id, this.props.children, id, and this.id
 checkMatch(){
  if('red' === this.state.backgroundColor){
    alert("Correct! It is red.")
  }else if('orange' === this.state.backgroundColor){
    alert("Correct! It is orange.")
  }else if('yellow' === this.state.backgroundColor){
    alert("Correct! It is yellow.")
  }else if('green' === this.state.backgroundColor){
    alert("Correct! It is green.")
  }else if('blue' === this.state.backgroundColor){
    alert("Correct! It is blue.")
  }else if('purple' === this.state.backgroundColor){
    alert("Correct! It is purple.")
  }else{
    alert("Try again!")
  }
   console.log(this.props.children) //undefined
   console.log(this.state.backgroundColor)
 }
  
  render(){
    return(
      <div>
    <div 
      //Color Square. User gets a new color when they click.
      className = "square"
      style={{backgroundColor: this.state.backgroundColor}}
      //onClick={this.handleClick}> //this one doesn't work. Not sure why.
      onClick={() => this.handleClick()}>Click for a New Color!</div>
        <div className = "color" id = 'red' onClick={() => this.checkMatch()}>red</div>
        <div className = "color" id = 'orange' onClick={() => this.checkMatch()}>orange</div>
        <div className = "color" id = 'yellow' onClick={() => this.checkMatch()}>yellow</div>
        <div className = "color" id = 'green' onClick={() => this.checkMatch()}>green</div>
        <div className = "color" id = 'blue' onClick={() => this.checkMatch()}>blue</div>
        <div className = "color" id = 'purple' onClick={() => this.checkMatch()}>purple</div>
        </div>
    );
  }
}

Thanks, again!

2

Ok… I see the problem here. For every color you have the same function that checks for all the colors.

so if u click red button for yellow the checkMatch() function checks if it is red then checks if it is orange the checks if it is yellow which is true…so for every color this is gonna repeat. I think you get my point…
So to make each function for each button unique you can do something like this:

checkMatch(color){
  if(color === this.state.backgroundColor){
    alert("Correct! It is red.")
  }else{
    alert("Try again!")
  }
   console.log(this.props.children) //undefined
   console.log(this.state.backgroundColor)
 }

Your divs will be like this :

<div className = "color" id = 'red' onClick={() => this.checkMatch('red')}>red</div>

<div className = "color" id = 'orange' onClick={() => this.checkMatch('orange')}>orange</div>

repeat this format with correct color argument for every div.

3

I think it would help if you made your match conditions into a loop over an array of values to match for.

let colorMatch = ["red", "yellow", "blue"...];
for( let i = 0; i < colorMatch.length; i++ ){
  if( colorMatch[i] === this.state.backgroundColor ){
    alert(`Correct! It is ${colorMatch[i]}.`);
    return;
  }
  alert("Try again!");
}
4

Of course! I think I have been staring at this for too long. Thank you both for your help!!