Styjun

What's the point of fighting monsters in Zelda BotW?

Do multi-engine jets need all engines with equal age to reduce asymmetry in thrust and fuel consumption arising out of deterioration?

Why didn't Doc believe Marty was from the future?

Is there a way to tell what frequency I need a PWM to be?

Is it unusual for a math department not to have a mail/web server?

Did ancient peoples ever hide their treasure behind puzzles?

Get contents before a colon

What is the following VRP?

Why can't I identify major and minor chords?

What is Soda Fountain Etiquette?

Why do IR remotes influence AM radios?

Group riding etiquette

Is this position a forced win for Black after move 14?

How can I reply to coworkers who accuse me of automating people out of work?

What is the sound/audio equivalent of "unsightly"?

Normalized Malbolge to Malbolge translator

Did the Apollo Guidance Computer really use 60% of the world's ICs in 1963?

Why does `buck` mean `step-down`?

Are sweatpants frowned upon on flights?

Is there a word or phrase that means "use other people's wifi or Internet service without consent"?

Why haven't the British protested Brexit as ardently like Hong Kongers protest?

What is a "hard problem" in the context of Mixed-integer programming?

Can I lend a small amount of my own money to a bank at the federal funds rate?

Why does Sauron not permit his followers to use his name?

React bad practice to use ReactDOM.render and inject component?

Function overloading in Javascript - Best practicesWhy is using “for…in” with array iteration a bad idea?JavaScript closure inside loops – simple practical exampleWhy is document.write considered a “bad practice”?Loop inside React JSXCan you force a React component to rerender without calling setState?What do these three dots in React do?Programmatically navigate using react routerHow to conditionally add attributes to React components?What is the difference between React Native and React?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

So I never really do this but I might have to for a certain problem I'm facing with a 3rd party library.

Basically, Is it bad to do something like

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
const id = 'testingId';
newDiv.id = id;
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />
 document.getElementById(id)
);

If so is there any other way I can approach this? Basically i'm trying to insert a component into a DOM element.

javascript reactjs

share|improve this question

asked Mar 27 at 22:01

christiancn7christiancn7

4566 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  What's the problem you're trying to solve?
  
  – djfdev
  Mar 27 at 22:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is perfectly valid code. Opinions about whether it's good or bad are off-topic for stack overflow
  
  – Fred Stark
  Mar 27 at 22:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @FredStark, I think there is a difference between asking for a "best" practice (i.e an opinionated view of which method is better than any other method) and asking if an approach is "bad" (i.e if there are any known side-effects that can be avoided through another method). OP seems to be asking about the latter. The answer here, as you said yourself, is no - there's nothing inherently wrong with this code... but that doesn't make it opinionated.
  
  – Chris
  Mar 27 at 22:23
  

  
  
  
  

add a comment | 

0

So I never really do this but I might have to for a certain problem I'm facing with a 3rd party library.

Basically, Is it bad to do something like

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
const id = 'testingId';
newDiv.id = id;
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />
 document.getElementById(id)
);

If so is there any other way I can approach this? Basically i'm trying to insert a component into a DOM element.

javascript reactjs

share|improve this question

asked Mar 27 at 22:01

christiancn7christiancn7

4566 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  What's the problem you're trying to solve?
  
  – djfdev
  Mar 27 at 22:04
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is perfectly valid code. Opinions about whether it's good or bad are off-topic for stack overflow
  
  – Fred Stark
  Mar 27 at 22:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @FredStark, I think there is a difference between asking for a "best" practice (i.e an opinionated view of which method is better than any other method) and asking if an approach is "bad" (i.e if there are any known side-effects that can be avoided through another method). OP seems to be asking about the latter. The answer here, as you said yourself, is no - there's nothing inherently wrong with this code... but that doesn't make it opinionated.
  
  – Chris
  Mar 27 at 22:23
  

  
  
  
  

add a comment | 

So I never really do this but I might have to for a certain problem I'm facing with a 3rd party library.

Basically, Is it bad to do something like

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
const id = 'testingId';
newDiv.id = id;
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />
 document.getElementById(id)
);

If so is there any other way I can approach this? Basically i'm trying to insert a component into a DOM element.

javascript reactjs

share|improve this question

asked Mar 27 at 22:01

christiancn7christiancn7

4566 bronze badges

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
const id = 'testingId';
newDiv.id = id;
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />
 document.getElementById(id)
);

share|improve this question

asked Mar 27 at 22:01

christiancn7christiancn7

4566 bronze badges

share|improve this question

asked Mar 27 at 22:01

christiancn7christiancn7

4566 bronze badges

asked Mar 27 at 22:01

christiancn7christiancn7

4566 bronze badges

asked Mar 27 at 22:01

christiancn7christiancn7

4566 bronze badges

2 Answers
2

active

oldest

votes

0

It's the correct practice, you can see that in react documentation:

enter image description here

Another altenative is centralize that in an object apart.

share|improve this answer

answered Mar 27 at 22:12

Marco FioritoMarco Fiorito

2955 bronze badges

add a comment | 

0

Is it bad to do something like...

No, the code you have there is fine, except that you forgot a , in your ReactDOM.render().
Other than that, there is nothing "bad" about it. You could achieve the same result with less lines if you instead did:

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />,
 newDiv
);

However, it is not clear from your question why you need to mount the React app to a child div of .foo-class, rather than just mounting it on foo-class directly - like so:

ReactDOM.render(
 <FooBarComponent />,
 document.querySelector('.foo-class')
);

share|improve this answer

edited Mar 27 at 23:44

answered Mar 27 at 22:10

ChrisChris

34.1k1212 gold badges6969 silver badges9292 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'd be very happy to know why this was down-voted. Is there something I missed or that I can improve? Please let me know, because the reason is unclear to me.
  
  – Chris
  Mar 27 at 22:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I never down-voted, but have spotted an oddity in your first snippet. document.getElementById(newDiv), well newDiv is already a DOM element, and doing getElementById on it doesn't make any sense.
  
  – Keith
  Mar 27 at 23:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Keith, Well spotted. A hasty copy-paste error on my part :) Fixed now. Thanks!
  
  – Chris
  Mar 27 at 23:43
  
  

  
  
  
  

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
);



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55387140%2freact-bad-practice-to-use-reactdom-render-and-inject-component%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

It's the correct practice, you can see that in react documentation:

enter image description here

Another altenative is centralize that in an object apart.

share|improve this answer

answered Mar 27 at 22:12

Marco FioritoMarco Fiorito

2955 bronze badges

add a comment | 

0

It's the correct practice, you can see that in react documentation:

enter image description here

Another altenative is centralize that in an object apart.

share|improve this answer

answered Mar 27 at 22:12

Marco FioritoMarco Fiorito

2955 bronze badges

add a comment | 

It's the correct practice, you can see that in react documentation:

enter image description here

Another altenative is centralize that in an object apart.

share|improve this answer

answered Mar 27 at 22:12

Marco FioritoMarco Fiorito

2955 bronze badges

share|improve this answer

answered Mar 27 at 22:12

Marco FioritoMarco Fiorito

2955 bronze badges

answered Mar 27 at 22:12

Marco FioritoMarco Fiorito

2955 bronze badges

answered Mar 27 at 22:12

Marco FioritoMarco Fiorito

2955 bronze badges

0

Is it bad to do something like...

No, the code you have there is fine, except that you forgot a , in your ReactDOM.render().
Other than that, there is nothing "bad" about it. You could achieve the same result with less lines if you instead did:

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />,
 newDiv
);

However, it is not clear from your question why you need to mount the React app to a child div of .foo-class, rather than just mounting it on foo-class directly - like so:

ReactDOM.render(
 <FooBarComponent />,
 document.querySelector('.foo-class')
);

share|improve this answer

edited Mar 27 at 23:44

answered Mar 27 at 22:10

ChrisChris

34.1k1212 gold badges6969 silver badges9292 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'd be very happy to know why this was down-voted. Is there something I missed or that I can improve? Please let me know, because the reason is unclear to me.
  
  – Chris
  Mar 27 at 22:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I never down-voted, but have spotted an oddity in your first snippet. document.getElementById(newDiv), well newDiv is already a DOM element, and doing getElementById on it doesn't make any sense.
  
  – Keith
  Mar 27 at 23:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Keith, Well spotted. A hasty copy-paste error on my part :) Fixed now. Thanks!
  
  – Chris
  Mar 27 at 23:43
  
  

  
  
  
  

add a comment | 

0

Is it bad to do something like...

No, the code you have there is fine, except that you forgot a , in your ReactDOM.render().
Other than that, there is nothing "bad" about it. You could achieve the same result with less lines if you instead did:

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />,
 newDiv
);

However, it is not clear from your question why you need to mount the React app to a child div of .foo-class, rather than just mounting it on foo-class directly - like so:

ReactDOM.render(
 <FooBarComponent />,
 document.querySelector('.foo-class')
);

share|improve this answer

edited Mar 27 at 23:44

answered Mar 27 at 22:10

ChrisChris

34.1k1212 gold badges6969 silver badges9292 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I'd be very happy to know why this was down-voted. Is there something I missed or that I can improve? Please let me know, because the reason is unclear to me.
  
  – Chris
  Mar 27 at 22:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I never down-voted, but have spotted an oddity in your first snippet. document.getElementById(newDiv), well newDiv is already a DOM element, and doing getElementById on it doesn't make any sense.
  
  – Keith
  Mar 27 at 23:37
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Keith, Well spotted. A hasty copy-paste error on my part :) Fixed now. Thanks!
  
  – Chris
  Mar 27 at 23:43
  
  

  
  
  
  

add a comment | 

Is it bad to do something like...

No, the code you have there is fine, except that you forgot a , in your ReactDOM.render().
Other than that, there is nothing "bad" about it. You could achieve the same result with less lines if you instead did:

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />,
 newDiv
);

However, it is not clear from your question why you need to mount the React app to a child div of .foo-class, rather than just mounting it on foo-class directly - like so:

ReactDOM.render(
 <FooBarComponent />,
 document.querySelector('.foo-class')
);

share|improve this answer

edited Mar 27 at 23:44

answered Mar 27 at 22:10

ChrisChris

34.1k1212 gold badges6969 silver badges9292 bronze badges

const fooEl = document.querySelector('.foo-class');
const newDiv = document.createElement('div');
foolEl.appendChild(newDiv);

ReactDOM.render(
 <FooBarComponent />,
 newDiv
);

ReactDOM.render(
 <FooBarComponent />,
 document.querySelector('.foo-class')
);

share|improve this answer

edited Mar 27 at 23:44

answered Mar 27 at 22:10

ChrisChris

34.1k1212 gold badges6969 silver badges9292 bronze badges

answered Mar 27 at 22:10

ChrisChris

34.1k1212 gold badges6969 silver badges9292 bronze badges

answered Mar 27 at 22:10

ChrisChris

34.1k1212 gold badges6969 silver badges9292 bronze badges