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!