16
_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 ??

3
  • Are you getting any errors in console? can you verify when you laod the page that Help-modal div actually exists?
    – finalfreq
    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
    Nov 3, 2016 at 17:45
  • Downvote. This is literally on the front-page of facebook.github.io/react
    – lux
    Nov 3, 2016 at 18:44

2 Answers 2

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

4
  • 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 3, 2016 at 19:00
  • 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.
    – Pineda
    Nov 3, 2016 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 ( <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??
    – LOKI
    Nov 3, 2016 at 19:13
  • Noticed a missing import (ReactDOM) and also a type with RaisedButton. I've amended my answer accordingly.
    – Pineda
    Nov 3, 2016 at 21:11
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')        
    );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.