Mixing
React bootstrap onclick list-group-item highlight the item/ active
I have 2 panel with list group on each panel. I am using bootstrap.
Issue:
onclick first list-group-item on panel 1 it changing style = "success", but when I click on the second list-group-item on panel 1 style change to "success" but not changing the first list-group-item style to default (style = "").
onclick on list-group-item it should change style or active or change the background color. Highlight the selected item and remove it when click on another item on the respective panel.
Alternative <ListGroupItem href="#" active>
my code: Code
javascript reactjs react-bootstrap
edited Jan 1 at 14:34
Cœur
18.7k9110150
asked Sep 4 '18 at 6:31
contact dummycontact dummy
1639
add a comment |
I have 2 panel with list group on each panel. I am using bootstrap.
Issue:
onclick first list-group-item on panel 1 it changing style = "success", but when I click on the second list-group-item on panel 1 style change to "success" but not changing the first list-group-item style to default (style = "").
onclick on list-group-item it should change style or active or change the background color. Highlight the selected item and remove it when click on another item on the respective panel.
Alternative <ListGroupItem href="#" active>
my code: Code
javascript reactjs react-bootstrap
edited Jan 1 at 14:34
Cœur
18.7k9110150
asked Sep 4 '18 at 6:31
contact dummycontact dummy
1639
add a comment |
I have 2 panel with list group on each panel. I am using bootstrap.
Issue:
onclick first list-group-item on panel 1 it changing style = "success", but when I click on the second list-group-item on panel 1 style change to "success" but not changing the first list-group-item style to default (style = "").
onclick on list-group-item it should change style or active or change the background color. Highlight the selected item and remove it when click on another item on the respective panel.
Alternative <ListGroupItem href="#" active>
my code: Code
javascript reactjs react-bootstrap
edited Jan 1 at 14:34
Cœur
18.7k9110150
asked Sep 4 '18 at 6:31
contact dummycontact dummy
1639
I have 2 panel with list group on each panel. I am using bootstrap.
Issue:
onclick first list-group-item on panel 1 it changing style = "success", but when I click on the second list-group-item on panel 1 style change to "success" but not changing the first list-group-item style to default (style = "").
onclick on list-group-item it should change style or active or change the background color. Highlight the selected item and remove it when click on another item on the respective panel.
Alternative <ListGroupItem href="#" active>
my code: Code
javascript reactjs react-bootstrap
javascript reactjs react-bootstrap
edited Jan 1 at 14:34
Cœur
18.7k9110150
asked Sep 4 '18 at 6:31
contact dummycontact dummy
1639
edited Jan 1 at 14:34
Cœur
18.7k9110150
asked Sep 4 '18 at 6:31
contact dummycontact dummy
1639
edited Jan 1 at 14:34
Cœur
18.7k9110150
edited Jan 1 at 14:34
Cœur
18.7k9110150
edited Jan 1 at 14:34
Cœur
18.7k9110150
18.7k9110150
asked Sep 4 '18 at 6:31
contact dummycontact dummy
1639
asked Sep 4 '18 at 6:31
contact dummycontact dummy
1639
asked Sep 4 '18 at 6:31
contact dummycontact dummy
1639
1639
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
On onSelectDevice function your setting card.style = "success"; to both buttons A and B.
But your not resetting the old style to empty when clicking on B.
either you can do like @Guillermo Quiros solution or you can setState again this.state.cards like below :
let showPropContainer = this.state.cards.slice() or [...this.state.cards];
let cards = showPropContainer.map((val, index) => {
val.esn === card.esn ? val.style="success" : val.style=""
return val;
});
this.setState({ selectedCard: card , cards})
Full solution available here
answered Sep 4 '18 at 7:01
JayavelJayavel
1,72111125
Thank you but I found Guillermo Quiros bit easy. I will go through your code and understand.
– contact dummy
Sep 4 '18 at 7:05
add a comment |
Your Answer
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: "1"
};
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: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
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
});
}
});
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%2fstackoverflow.com%2fquestions%2f52160077%2freact-bootstrap-onclick-list-group-item-highlight-the-item-active%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
On onSelectDevice function your setting card.style = "success"; to both buttons A and B.
But your not resetting the old style to empty when clicking on B.
either you can do like @Guillermo Quiros solution or you can setState again this.state.cards like below :
let showPropContainer = this.state.cards.slice() or [...this.state.cards];
let cards = showPropContainer.map((val, index) => {
val.esn === card.esn ? val.style="success" : val.style=""
return val;
});
this.setState({ selectedCard: card , cards})
Full solution available here
answered Sep 4 '18 at 7:01
JayavelJayavel
1,72111125
Thank you but I found Guillermo Quiros bit easy. I will go through your code and understand.
– contact dummy
Sep 4 '18 at 7:05
add a comment |
On onSelectDevice function your setting card.style = "success"; to both buttons A and B.
But your not resetting the old style to empty when clicking on B.
either you can do like @Guillermo Quiros solution or you can setState again this.state.cards like below :
let showPropContainer = this.state.cards.slice() or [...this.state.cards];
let cards = showPropContainer.map((val, index) => {
val.esn === card.esn ? val.style="success" : val.style=""
return val;
});
this.setState({ selectedCard: card , cards})
Full solution available here
answered Sep 4 '18 at 7:01
JayavelJayavel
1,72111125
Thank you but I found Guillermo Quiros bit easy. I will go through your code and understand.
– contact dummy
Sep 4 '18 at 7:05
add a comment |
On onSelectDevice function your setting card.style = "success"; to both buttons A and B.
But your not resetting the old style to empty when clicking on B.
either you can do like @Guillermo Quiros solution or you can setState again this.state.cards like below :
let showPropContainer = this.state.cards.slice() or [...this.state.cards];
let cards = showPropContainer.map((val, index) => {
val.esn === card.esn ? val.style="success" : val.style=""
return val;
});
this.setState({ selectedCard: card , cards})
Full solution available here
answered Sep 4 '18 at 7:01
JayavelJayavel
1,72111125
On onSelectDevice function your setting card.style = "success"; to both buttons A and B.
But your not resetting the old style to empty when clicking on B.
either you can do like @Guillermo Quiros solution or you can setState again this.state.cards like below :
let showPropContainer = this.state.cards.slice() or [...this.state.cards];
let cards = showPropContainer.map((val, index) => {
val.esn === card.esn ? val.style="success" : val.style=""
return val;
});
this.setState({ selectedCard: card , cards})
Full solution available here
answered Sep 4 '18 at 7:01
JayavelJayavel
1,72111125
answered Sep 4 '18 at 7:01
JayavelJayavel
1,72111125
answered Sep 4 '18 at 7:01
JayavelJayavel
1,72111125
answered Sep 4 '18 at 7:01
JayavelJayavel
1,72111125
1,72111125
Thank you but I found Guillermo Quiros bit easy. I will go through your code and understand.
– contact dummy
Sep 4 '18 at 7:05
add a comment |
Thank you but I found Guillermo Quiros bit easy. I will go through your code and understand.
– contact dummy
Sep 4 '18 at 7:05
Thank you but I found Guillermo Quiros bit easy. I will go through your code and understand.
– contact dummy
Sep 4 '18 at 7:05
Thank you but I found Guillermo Quiros bit easy. I will go through your code and understand.
– contact dummy
Sep 4 '18 at 7:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- 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.
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%2fstackoverflow.com%2fquestions%2f52160077%2freact-bootstrap-onclick-list-group-item-highlight-the-item-active%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
