1
\$\begingroup\$

I am making a profile picture selection screen, basically you select a picture pic1, if another picture pic2 is selected, then we cancel the highlight of pic2 and highlight pic1. Here is my code right now for it in React (btw, I am using CSS to take care of the highlighting).

How I am doing it currently (let's say I only have 3 options to choose from), this is the code taking care of determining which one is clicked:

`  this.state = {
      isClicked1: false,
      isClicked2: false,
      isClicked3: false
    };`

The JSX code that actually displays everything:

<a class={a_class1} onClick={this.profilePicClick1}>
 <img src={hero001} />
</a>
<a class={a_class2} onClick={this.profilePicClick2}>
  <img src={hero002} />
</a>
<a class={a_class3} onClick={this.profilePicClick3}>
  <img src={hero003} />
</a>

The class is actually what determines if it is highlighted or not (background color in CSS), if the class is animal selected then it has a background else no background.

let a_class1 = this.state.isClicked1 ? "animal selected" : "animal";
let a_class2 = this.state.isClicked2 ? "animal selected" : "animal";
let a_class3 = this.state.isClicked3 ? "animal selected" : "animal";

And the JS logic:

  profilePicClick1 = () => {
    this.setState({ isClicked1: !this.state.isClicked1 });
    this.setState({ isClicked2: false });
    this.setState({ isClicked3: false });
  };

  profilePicClick2 = () => {
    this.setState({ isClicked2: !this.state.isClicked2 });
    this.setState({ isclicked3: false });
    this.setState({ isClicked1: false });
  };

  profilePicClick3 = () => {
    this.setState({ isClicked3: !this.state.isClicked2 });
    this.setState({ isclicked1: false });
    this.setState({ isClicked2: false });
  };

Here's a run through sorry if my code is confusing: on load, the isClicked state for all images is false, that leads to each a_class being "animal", and on render, it will display the images with the a_classes, since it is only animal, we will display the normal image. Onclick of let's say image1, we will turn isClicked1 into true, which will make a_class1 "animal selected", and will thus render the picture with the background selected color. And onClick of another picture other than pic1, we will set all other isClicked to false besides the one just being clicked, and blah blah.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.