React - using “document” inside of a component
If i have a presentational (child) component with the following line:
<small id="parameters"> some parameters text </small>
I noticed that if i go to its parent container component and try to get that element by:
const textElem = document.getElementById('parameters').value;
It is not going to get its value.
Why is that? If i use document in a component, is it only "local" to that component?
javascript html reactjs
edited Nov 15 '18 at 17:16
rubentd
1,089922
asked Nov 15 '18 at 17:08
Gambit2007Gambit2007
450728
add a comment |
If i have a presentational (child) component with the following line:
<small id="parameters"> some parameters text </small>
I noticed that if i go to its parent container component and try to get that element by:
const textElem = document.getElementById('parameters').value;
It is not going to get its value.
Why is that? If i use document in a component, is it only "local" to that component?
javascript html reactjs
edited Nov 15 '18 at 17:16
rubentd
1,089922
asked Nov 15 '18 at 17:08
Gambit2007Gambit2007
450728
add a comment |
If i have a presentational (child) component with the following line:
<small id="parameters"> some parameters text </small>
I noticed that if i go to its parent container component and try to get that element by:
const textElem = document.getElementById('parameters').value;
It is not going to get its value.
Why is that? If i use document in a component, is it only "local" to that component?
javascript html reactjs
edited Nov 15 '18 at 17:16
rubentd
1,089922
asked Nov 15 '18 at 17:08
Gambit2007Gambit2007
450728
If i have a presentational (child) component with the following line:
<small id="parameters"> some parameters text </small>
I noticed that if i go to its parent container component and try to get that element by:
const textElem = document.getElementById('parameters').value;
It is not going to get its value.
Why is that? If i use document in a component, is it only "local" to that component?
javascript html reactjs
javascript html reactjs
edited Nov 15 '18 at 17:16
rubentd
1,089922
asked Nov 15 '18 at 17:08
Gambit2007Gambit2007
450728
edited Nov 15 '18 at 17:16
rubentd
1,089922
asked Nov 15 '18 at 17:08
Gambit2007Gambit2007
450728
edited Nov 15 '18 at 17:16
rubentd
1,089922
edited Nov 15 '18 at 17:16
rubentd
1,089922
edited Nov 15 '18 at 17:16
rubentd
1,089922
1,089922
asked Nov 15 '18 at 17:08
Gambit2007Gambit2007
450728
asked Nov 15 '18 at 17:08
Gambit2007Gambit2007
450728
asked Nov 15 '18 at 17:08
Gambit2007Gambit2007
450728
450728
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You can use document inside a component, to reference the global document object, it's not local to that component, however, at the point you're referencing document.getElementById('parameters') this element might not have been rendered yet to the dom, so make sure to call it after the child element has rendered.
On the other hand, maybe you meant to use: document.getElementById('parameters').innerHTML
to get the text inside that element, instead of .value
answered Nov 15 '18 at 17:11
rubentdrubentd
1,089922
yes, you can do that incomponentDidMount()or inuseEffect()
– vijayst
Nov 15 '18 at 17:11
Yeah the child element has been rendered. Should i then be able to usetextElem.select();? Because currently it doesn't seem to work for some reason.
– Gambit2007
Nov 15 '18 at 17:18
did you try document.getElementById('parameters').innerHTML ?
– rubentd
Nov 15 '18 at 17:20
also document.getElementById('parameters').innerText
– rubentd
Nov 15 '18 at 17:21
1
You may want to consider a ref in this case, especially for something likeselect(),focus(), etc. Keep in mind select() is for inputs like text.
– Alexander Staroselsky
Nov 15 '18 at 17:24
|
show 5 more comments
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%2f53324622%2freact-using-document-inside-of-a-component%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
You can use document inside a component, to reference the global document object, it's not local to that component, however, at the point you're referencing document.getElementById('parameters') this element might not have been rendered yet to the dom, so make sure to call it after the child element has rendered.
On the other hand, maybe you meant to use: document.getElementById('parameters').innerHTML
to get the text inside that element, instead of .value
answered Nov 15 '18 at 17:11
rubentdrubentd
1,089922
yes, you can do that incomponentDidMount()or inuseEffect()
– vijayst
Nov 15 '18 at 17:11
Yeah the child element has been rendered. Should i then be able to usetextElem.select();? Because currently it doesn't seem to work for some reason.
– Gambit2007
Nov 15 '18 at 17:18
did you try document.getElementById('parameters').innerHTML ?
– rubentd
Nov 15 '18 at 17:20
also document.getElementById('parameters').innerText
– rubentd
Nov 15 '18 at 17:21
1
You may want to consider a ref in this case, especially for something likeselect(),focus(), etc. Keep in mind select() is for inputs like text.
– Alexander Staroselsky
Nov 15 '18 at 17:24
|
show 5 more comments
You can use document inside a component, to reference the global document object, it's not local to that component, however, at the point you're referencing document.getElementById('parameters') this element might not have been rendered yet to the dom, so make sure to call it after the child element has rendered.
On the other hand, maybe you meant to use: document.getElementById('parameters').innerHTML
to get the text inside that element, instead of .value
answered Nov 15 '18 at 17:11
rubentdrubentd
1,089922
yes, you can do that incomponentDidMount()or inuseEffect()
– vijayst
Nov 15 '18 at 17:11
Yeah the child element has been rendered. Should i then be able to usetextElem.select();? Because currently it doesn't seem to work for some reason.
– Gambit2007
Nov 15 '18 at 17:18
did you try document.getElementById('parameters').innerHTML ?
– rubentd
Nov 15 '18 at 17:20
also document.getElementById('parameters').innerText
– rubentd
Nov 15 '18 at 17:21
1
You may want to consider a ref in this case, especially for something likeselect(),focus(), etc. Keep in mind select() is for inputs like text.
– Alexander Staroselsky
Nov 15 '18 at 17:24
|
show 5 more comments
You can use document inside a component, to reference the global document object, it's not local to that component, however, at the point you're referencing document.getElementById('parameters') this element might not have been rendered yet to the dom, so make sure to call it after the child element has rendered.
On the other hand, maybe you meant to use: document.getElementById('parameters').innerHTML
to get the text inside that element, instead of .value
answered Nov 15 '18 at 17:11
rubentdrubentd
1,089922
You can use document inside a component, to reference the global document object, it's not local to that component, however, at the point you're referencing document.getElementById('parameters') this element might not have been rendered yet to the dom, so make sure to call it after the child element has rendered.
On the other hand, maybe you meant to use: document.getElementById('parameters').innerHTML
to get the text inside that element, instead of .value
answered Nov 15 '18 at 17:11
rubentdrubentd
1,089922
edited Nov 15 '18 at 17:12
answered Nov 15 '18 at 17:11
rubentdrubentd
1,089922
answered Nov 15 '18 at 17:11
rubentdrubentd
1,089922
answered Nov 15 '18 at 17:11
rubentdrubentd
1,089922
1,089922
yes, you can do that incomponentDidMount()or inuseEffect()
– vijayst
Nov 15 '18 at 17:11
Yeah the child element has been rendered. Should i then be able to usetextElem.select();? Because currently it doesn't seem to work for some reason.
– Gambit2007
Nov 15 '18 at 17:18
did you try document.getElementById('parameters').innerHTML ?
– rubentd
Nov 15 '18 at 17:20
also document.getElementById('parameters').innerText
– rubentd
Nov 15 '18 at 17:21
1
You may want to consider a ref in this case, especially for something likeselect(),focus(), etc. Keep in mind select() is for inputs like text.
– Alexander Staroselsky
Nov 15 '18 at 17:24
|
show 5 more comments
yes, you can do that incomponentDidMount()or inuseEffect()
– vijayst
Nov 15 '18 at 17:11
Yeah the child element has been rendered. Should i then be able to usetextElem.select();? Because currently it doesn't seem to work for some reason.
– Gambit2007
Nov 15 '18 at 17:18
did you try document.getElementById('parameters').innerHTML ?
– rubentd
Nov 15 '18 at 17:20
also document.getElementById('parameters').innerText
– rubentd
Nov 15 '18 at 17:21
1
You may want to consider a ref in this case, especially for something likeselect(),focus(), etc. Keep in mind select() is for inputs like text.
– Alexander Staroselsky
Nov 15 '18 at 17:24
yes, you can do that in
componentDidMount() or in useEffect()– vijayst
Nov 15 '18 at 17:11
yes, you can do that in
componentDidMount() or in useEffect()– vijayst
Nov 15 '18 at 17:11
Yeah the child element has been rendered. Should i then be able to use
textElem.select();? Because currently it doesn't seem to work for some reason.– Gambit2007
Nov 15 '18 at 17:18
Yeah the child element has been rendered. Should i then be able to use
textElem.select();? Because currently it doesn't seem to work for some reason.– Gambit2007
Nov 15 '18 at 17:18
did you try document.getElementById('parameters').innerHTML ?
– rubentd
Nov 15 '18 at 17:20
did you try document.getElementById('parameters').innerHTML ?
– rubentd
Nov 15 '18 at 17:20
also document.getElementById('parameters').innerText
– rubentd
Nov 15 '18 at 17:21
also document.getElementById('parameters').innerText
– rubentd
Nov 15 '18 at 17:21
1
1
You may want to consider a ref in this case, especially for something like
select(), focus(), etc. Keep in mind select() is for inputs like text.– Alexander Staroselsky
Nov 15 '18 at 17:24
You may want to consider a ref in this case, especially for something like
select(), focus(), etc. Keep in mind select() is for inputs like text.– Alexander Staroselsky
Nov 15 '18 at 17:24
|
show 5 more comments
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%2f53324622%2freact-using-document-inside-of-a-component%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
