Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to render a react component using ReactDOM Render

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

like image 700
LOKI Avatar asked Nov 03 '16 17:11

LOKI


People also ask

What is the use of reactdom render () method?

The ReactDOM.render () method is used to render react elements or components to a DOM node. If you want to display React elements of components on the web page, then you can use ReactDOM.render () method.

How do I render a React component?

render () Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components ). If the React element was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.

How to use reactdom in react web app?

Pre-requisite: To use the ReactDOM in any React web app we must first import ReactDOM from the react-dom package by using the following code snippet: This is one of the most important methods of ReactDOM. This function is used to render a single React Component or several Components wrapped together in a Component or a div element.

How to render a react element into a root DOM node?

If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. To render a React element into a root DOM node, pass both to ReactDOM.render (): It displays “Hello, world” on the page.


2 Answers

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

like image 152
Pineda Avatar answered Oct 15 '22 11:10

Pineda


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')        
    );
like image 42
Shubham Khatri Avatar answered Oct 15 '22 11:10

Shubham Khatri