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, Nov 03 '16 at 17:31
No errors in the console... when i inspect header, it is just showing that div tag (no button) — LOKI, Nov 03 '16 at 17:45
Downvote. This is literally on the front-page of https://facebook.github.io/react/ — lux, Nov 03 '16 at 18:44

Pineda · Accepted Answer · 2016-11-03T21:10:52.390

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

I appreciate your answer, but I did as you said and I removed helppage.js . Still, I couldn't see the button on screen — LOKI, Nov 03 '16 at 19:00
It's not just about removing helppage.js. ReactDOM.render is called outside of the class definition and receives the 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. — Pineda, Nov 03 '16 at 19:06
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 (

); } } ReactDOM.render(,document.getElementById('Help-modal'));This is what I did , Can you correct me if I am wrong?? — LOKI, Nov 03 '16 at 19:13
Noticed a missing import (ReactDOM) and also a type with RaisedButton. I've amended my answer accordingly. — Pineda, Nov 03 '16 at 21:11

score 4 · Answer 2 · answered Nov 03 '16 at 17:51

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

how to render a react component using ReactDOM Render

2 Answers2

Linked