ReactJS code that allows at most one profile pic to be selected
$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.
event-handling jsx
edited 12 mins ago
200_success
129k15153417
asked 3 hours ago
AcyAcy
1
New contributor
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
$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.
event-handling jsx
edited 12 mins ago
200_success
129k15153417
asked 3 hours ago
AcyAcy
1
New contributor
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
add a comment |
$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.
event-handling jsx
edited 12 mins ago
200_success
129k15153417
asked 3 hours ago
AcyAcy
1
New contributor
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
$endgroup$
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.
event-handling jsx
event-handling jsx
edited 12 mins ago
200_success
129k15153417
asked 3 hours ago
AcyAcy
1
New contributor
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 12 mins ago
200_success
129k15153417
asked 3 hours ago
AcyAcy
1
New contributor
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited 12 mins ago
200_success
129k15153417
edited 12 mins ago
200_success
129k15153417
edited 12 mins ago
200_success
129k15153417
129k15153417
asked 3 hours ago
AcyAcy
1
New contributor
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 3 hours ago
AcyAcy
1
asked 3 hours ago
AcyAcy
1
1
New contributor
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Acy is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Acy is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f214287%2freactjs-code-that-allows-at-most-one-profile-pic-to-be-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Acy is a new contributor. Be nice, and check out our Code of Conduct.
Acy is a new contributor. Be nice, and check out our Code of Conduct.
Acy is a new contributor. Be nice, and check out our Code of Conduct.
Acy is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f214287%2freactjs-code-that-allows-at-most-one-profile-pic-to-be-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
