how to render a react component using ReactDOM Render

Question

_Header (cshtml) 

<div id="Help"></div>


export default class Help {
    ReactDOM.render(     
           <Help/>,
           document.getElementById('Help')        
        );
}

Help.js (component)


}

My goal is to render a help button on header.

I've Created div tag with id help-modal , and a component rendering help button. I am connection those two in help.js by ReactDOM.render(.........); when I do npm run dist and dotnet run , and see the browser I couldn't see the button on header . Can any one help on this please ??

Are you getting any errors in console? can you verify when you laod the page that Help-modal div actually exists? — finalfreq
– finalfreq, Commented Nov 3, 2016 at 17:31
No errors in the console... when i inspect header, it is just showing that div tag (no button) — LOKI
– LOKI, Commented Nov 3, 2016 at 17:45
Downvote. This is literally on the front-page of facebook.github.io/react — lux
– lux, Commented Nov 3, 2016 at 18:44

Pineda · Accepted Answer · 2016-11-03 21:10:52Z

24

You are calling ReactDOM.render within a React component that doesn't get rendered.

Call ReactDOM render outside of the class definition for help

To render your button to the screen:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

class Help extends Component {
  render() {
    return (
      <div>
        <RaisedButton label="Help"/> 
      </div>
    );
  }
}
ReactDOM.render(     
  <Help />,
  document.getElementById('Help-modal')        
);

That's it.

To avoid confusion should try and give your components meaningful names. Naming both of them Help can get confusing when you are trying to import one into another (which in this case isn't necessary).

If you indeed wanted to nest the Help component in an app.js/index.js root level component, it would be necessary to export the element, so the class declaration line would be modified as follows:

export default class Help extends Component {

then in your parent component, you'd need to import it with something like:

import Help from './components/Help';

UPDATE: just noticed there was a type with:
import RaisedButton from 'material-ui/RaisedButon';
it's missing a 't' in RaisedButton!

should be:
import RaisedButton from 'material-ui/RaisedButton';

edited Nov 3, 2016 at 21:10

answered Nov 3, 2016 at 17:55

Pineda

7,5933 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LOKI Over a year ago

I appreciate your answer, but I did as you said and I removed helppage.js . Still, I couldn't see the button on screen

Pineda Over a year ago

It's not just about removing helppage.js. ReactDOM.render is called outside of the class definition and receives the <Help /> component defined above it. It would be helpful for you to add how you are testing this as well as expanding on your html file.

LOKI Over a year ago

import React, { Component } from 'react'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; import RaisedButton from 'material-ui/RaisedButon'; class Help extends Component { render() { return ( <div> <RaisedButton label="Help"/> </div> ); } } ReactDOM.render(<Help/>,document.getElementById('Help-modal'));This is what I did , Can you correct me if I am wrong??

Pineda Over a year ago

Noticed a missing import (ReactDOM) and also a type with RaisedButton. I've amended my answer accordingly.

Shubham Khatri · Accepted Answer · 2016-11-03 17:51:22Z

4

You need to export the Help Component

Help.js

import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButon';

class Help extends Component {
    render() {
           return (
                <div>
                   <RaisedButton label="Help"/> 
                </div>
        );
    }
}

export default Help;

And no need to create a React Component to render the HelpComponent

Helppage.js

import HelpComponent from '../components/Help';
import ReactDOM from 'react-dom';

ReactDOM.render(     
       <HelpComponent/>,
       document.getElementById('Help-modal')        
    );

answered Nov 3, 2016 at 17:51

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

how to render a react component using ReactDOM Render

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related