How to change component's className according to its descendant's className in React?
I have a React App that results to the structure similar to this:
[EDIT.: this is not a source code (which is not simply in one component), but rendered html (I believe it's sufficient for describing the problem)]:
<Component1 className="main-component1">
<Something className="sub-component1"/>
<SomethingDifferent className="sub-component2"/>
<Something className="sub-component1"/>
</Component1>
<Component1 className="main-component1">
<SomethingDifferent className="sub-component2"/>
<SomethingDifferent className="sub-component2"/>
<div className="popup"/>
</SomethingDifferent>
<Something className="subComponent1"/>
</Component1>
.
.
.
the popup is rendered only in specific situations. And I would like to change the className of its top parent (Component1) to be className="main-component1 containsPopup". Any idea how to do that?
I was thinking about using Refs, but I wasn't able to find a suitable use in this case.
Another idea was just to use some query filter to find it, but that doesn't seem to me like a nice approach.
I will be glad for any ideas ^_^
reactjs dom classname
asked Nov 22 at 19:20
Linda Langerová
315
|
show 2 more comments
I have a React App that results to the structure similar to this:
[EDIT.: this is not a source code (which is not simply in one component), but rendered html (I believe it's sufficient for describing the problem)]:
<Component1 className="main-component1">
<Something className="sub-component1"/>
<SomethingDifferent className="sub-component2"/>
<Something className="sub-component1"/>
</Component1>
<Component1 className="main-component1">
<SomethingDifferent className="sub-component2"/>
<SomethingDifferent className="sub-component2"/>
<div className="popup"/>
</SomethingDifferent>
<Something className="subComponent1"/>
</Component1>
.
.
.
the popup is rendered only in specific situations. And I would like to change the className of its top parent (Component1) to be className="main-component1 containsPopup". Any idea how to do that?
I was thinking about using Refs, but I wasn't able to find a suitable use in this case.
Another idea was just to use some query filter to find it, but that doesn't seem to me like a nice approach.
I will be glad for any ideas ^_^
reactjs dom classname
asked Nov 22 at 19:20
Linda Langerová
315
"the popup is rendered only in specific situations." Is there any logic for that? Because with the current markup the popup is being always rendered.
– Ramiz Wachtler
Nov 22 at 19:24
Yeah, this was meant to be just an exemplary final html structure (not the generating code) to demonstrate it on something simple (whole code is huge).SomethingDifferentmight render for example some divs and an input and the popup is rendered only if that input is focussed.
– Linda Langerová
Nov 22 at 19:31
Ok, because in that case you could reuse the logic for the rendering of the popup within the className string
– Ramiz Wachtler
Nov 22 at 19:33
How exactly please? I need to change the className only atComponent1that has thepopupas its descendant and not allComponent1. Right now I can think about solutions that would change tha className for whole Class and not just a specific instance :/
– Linda Langerová
Nov 22 at 19:39
Ahh, ok, I thought first that the<Component1>is being generated by a.mapor something, but it's just manually placed multiple times
– Ramiz Wachtler
Nov 22 at 19:43
|
show 2 more comments
I have a React App that results to the structure similar to this:
[EDIT.: this is not a source code (which is not simply in one component), but rendered html (I believe it's sufficient for describing the problem)]:
<Component1 className="main-component1">
<Something className="sub-component1"/>
<SomethingDifferent className="sub-component2"/>
<Something className="sub-component1"/>
</Component1>
<Component1 className="main-component1">
<SomethingDifferent className="sub-component2"/>
<SomethingDifferent className="sub-component2"/>
<div className="popup"/>
</SomethingDifferent>
<Something className="subComponent1"/>
</Component1>
.
.
.
the popup is rendered only in specific situations. And I would like to change the className of its top parent (Component1) to be className="main-component1 containsPopup". Any idea how to do that?
I was thinking about using Refs, but I wasn't able to find a suitable use in this case.
Another idea was just to use some query filter to find it, but that doesn't seem to me like a nice approach.
I will be glad for any ideas ^_^
reactjs dom classname
asked Nov 22 at 19:20
Linda Langerová
315
I have a React App that results to the structure similar to this:
[EDIT.: this is not a source code (which is not simply in one component), but rendered html (I believe it's sufficient for describing the problem)]:
<Component1 className="main-component1">
<Something className="sub-component1"/>
<SomethingDifferent className="sub-component2"/>
<Something className="sub-component1"/>
</Component1>
<Component1 className="main-component1">
<SomethingDifferent className="sub-component2"/>
<SomethingDifferent className="sub-component2"/>
<div className="popup"/>
</SomethingDifferent>
<Something className="subComponent1"/>
</Component1>
.
.
.
the popup is rendered only in specific situations. And I would like to change the className of its top parent (Component1) to be className="main-component1 containsPopup". Any idea how to do that?
I was thinking about using Refs, but I wasn't able to find a suitable use in this case.
Another idea was just to use some query filter to find it, but that doesn't seem to me like a nice approach.
I will be glad for any ideas ^_^
reactjs dom classname
reactjs dom classname
asked Nov 22 at 19:20
Linda Langerová
315
asked Nov 22 at 19:20
Linda Langerová
315
edited Nov 22 at 19:43
asked Nov 22 at 19:20
Linda Langerová
315
asked Nov 22 at 19:20
Linda Langerová
315
asked Nov 22 at 19:20
Linda Langerová
315
315
"the popup is rendered only in specific situations." Is there any logic for that? Because with the current markup the popup is being always rendered.
– Ramiz Wachtler
Nov 22 at 19:24
Yeah, this was meant to be just an exemplary final html structure (not the generating code) to demonstrate it on something simple (whole code is huge).SomethingDifferentmight render for example some divs and an input and the popup is rendered only if that input is focussed.
– Linda Langerová
Nov 22 at 19:31
Ok, because in that case you could reuse the logic for the rendering of the popup within the className string
– Ramiz Wachtler
Nov 22 at 19:33
How exactly please? I need to change the className only atComponent1that has thepopupas its descendant and not allComponent1. Right now I can think about solutions that would change tha className for whole Class and not just a specific instance :/
– Linda Langerová
Nov 22 at 19:39
Ahh, ok, I thought first that the<Component1>is being generated by a.mapor something, but it's just manually placed multiple times
– Ramiz Wachtler
Nov 22 at 19:43
|
show 2 more comments
"the popup is rendered only in specific situations." Is there any logic for that? Because with the current markup the popup is being always rendered.
– Ramiz Wachtler
Nov 22 at 19:24
Yeah, this was meant to be just an exemplary final html structure (not the generating code) to demonstrate it on something simple (whole code is huge).SomethingDifferentmight render for example some divs and an input and the popup is rendered only if that input is focussed.
– Linda Langerová
Nov 22 at 19:31
Ok, because in that case you could reuse the logic for the rendering of the popup within the className string
– Ramiz Wachtler
Nov 22 at 19:33
How exactly please? I need to change the className only atComponent1that has thepopupas its descendant and not allComponent1. Right now I can think about solutions that would change tha className for whole Class and not just a specific instance :/
– Linda Langerová
Nov 22 at 19:39
Ahh, ok, I thought first that the<Component1>is being generated by a.mapor something, but it's just manually placed multiple times
– Ramiz Wachtler
Nov 22 at 19:43
"the popup is rendered only in specific situations." Is there any logic for that? Because with the current markup the popup is being always rendered.
– Ramiz Wachtler
Nov 22 at 19:24
"the popup is rendered only in specific situations." Is there any logic for that? Because with the current markup the popup is being always rendered.
– Ramiz Wachtler
Nov 22 at 19:24
Yeah, this was meant to be just an exemplary final html structure (not the generating code) to demonstrate it on something simple (whole code is huge).
SomethingDifferent might render for example some divs and an input and the popup is rendered only if that input is focussed.– Linda Langerová
Nov 22 at 19:31
Yeah, this was meant to be just an exemplary final html structure (not the generating code) to demonstrate it on something simple (whole code is huge).
SomethingDifferent might render for example some divs and an input and the popup is rendered only if that input is focussed.– Linda Langerová
Nov 22 at 19:31
Ok, because in that case you could reuse the logic for the rendering of the popup within the className string
– Ramiz Wachtler
Nov 22 at 19:33
Ok, because in that case you could reuse the logic for the rendering of the popup within the className string
– Ramiz Wachtler
Nov 22 at 19:33
How exactly please? I need to change the className only at
Component1 that has the popup as its descendant and not all Component1. Right now I can think about solutions that would change tha className for whole Class and not just a specific instance :/– Linda Langerová
Nov 22 at 19:39
How exactly please? I need to change the className only at
Component1 that has the popup as its descendant and not all Component1. Right now I can think about solutions that would change tha className for whole Class and not just a specific instance :/– Linda Langerová
Nov 22 at 19:39
Ahh, ok, I thought first that the
<Component1> is being generated by a .map or something, but it's just manually placed multiple times– Ramiz Wachtler
Nov 22 at 19:43
Ahh, ok, I thought first that the
<Component1> is being generated by a .map or something, but it's just manually placed multiple times– Ramiz Wachtler
Nov 22 at 19:43
|
show 2 more comments
active
oldest
votes
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%2f53436996%2fhow-to-change-components-classname-according-to-its-descendants-classname-in-r%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53436996%2fhow-to-change-components-classname-according-to-its-descendants-classname-in-r%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
"the popup is rendered only in specific situations." Is there any logic for that? Because with the current markup the popup is being always rendered.
– Ramiz Wachtler
Nov 22 at 19:24
Yeah, this was meant to be just an exemplary final html structure (not the generating code) to demonstrate it on something simple (whole code is huge).
SomethingDifferentmight render for example some divs and an input and the popup is rendered only if that input is focussed.– Linda Langerová
Nov 22 at 19:31
Ok, because in that case you could reuse the logic for the rendering of the popup within the className string
– Ramiz Wachtler
Nov 22 at 19:33
How exactly please? I need to change the className only at
Component1that has thepopupas its descendant and not allComponent1. Right now I can think about solutions that would change tha className for whole Class and not just a specific instance :/– Linda Langerová
Nov 22 at 19:39
Ahh, ok, I thought first that the
<Component1>is being generated by a.mapor something, but it's just manually placed multiple times– Ramiz Wachtler
Nov 22 at 19:43