_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 ??
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.
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.
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.
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.
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';
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')
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With