score: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';
score: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')
);
Source: stackoverflow.com
Related Query
- how to render a react component using ReactDOM Render
- How to pass the match when using render in Route component from react router (v4)
- How to wait for complete render of React component in Mocha using Enzyme?
- How to render a React component (ES6 API) directly using ReactDOM?
- How can you render a react component using dynamic name?
- How to render a component using innerHTML in React jsx
- How to render different component onClick using React material-ui Drawer list?
- How to mock properly with Jest a React component using render props
- How do I Render a new component in React using Material-UI AppBar onTitleClick Property?
- how to integrate haml with react js.i want to render react component using Haml file?
- I'm using react-slick, how can I export a React Component as a single element but remove the parent div on render
- How to render a child component within parent component using react and typescript?
- How to render component conditionally when leaf value of global state changes using react hooks
- How to render the parent component in the child component using react and typescript?
- How to cause a component to re render in react when using a hook which holds some state
- How to render a react component using HTML class attribute?
- How to sent argument to handler event in React render component not using lambda function?
- React - How can I render a component within a class by using OnClick?
- How to fetch an array of objects and render it in the component as a normal text using React Hooks?
- How can I render a React component from server.js to App.js using post?
- How to render react components by using map and join?
- How to render rectangles in a D3 grouped bar chart using React Faux DOM?
- How to make the whole Card component clickable in Material UI using React JS?
- How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?
- How to declare defaultProps on a React component class using TypeScript?
- How to prevent child component from re-rendering when using React hooks and memo?
- How to submit form component in modal dialogue using antd react component library
- How to render a react element using an html string?
- How to render React Component into itself, in a recursive way
- How to unit test a style of a React Component using Jest.js?
More Query from same tag
- ReactJS error TypeError: Object(...) is not a function
- add object to an existing array of objects React Recoil
- How To create this custom shape in react konva
- useCustomHook being called on every render - is something wrong with this
- How to print multiple items of a JS object/array in per iteration with map?
- React: Can't pass an id to an endpoint in order to display an image
- I need to access to input inside InputGroup BlueprintJs react component
- why I can't get my onChange/onBlur handler work on custom component (reactjs)
- Redux form - adding dynamically prop name to FormSection
- Enable all range selector's options in stock highcharts
- how to pass prop server side react
- Component hiding and showing
- How do I specify an empty alt attribute in React/JSX?
- Material UI Rotate Menu Icons Individually
- Font.loadAsync() can't resolve module for custom fonts (React Native & Expo)
- TypeError: Cannot assign to read only property 'statusKnown' of object '#<Object>'
- react-dates <DateRangePicker /> onFocusChange function invalid prop warning
- redux: dispatch is not working
- Error: failed to process not implemented: regenerator: complex pattern in catch clause -- In NextJs 12
- How can I update a component's state based on its current state with React Hooks?
- Placeholder text for input is only shown when selected using ReactJS
- Firebase onAuthStateChange return undefined when page refresh
- React JS with Material UI - When using withStyles this.props is undefined
- React - dynamic background image
- TreeView - How to change font of expandable TreeItems to bold?
- Async function with one try catch block
- Should React/Redux development be Object Oriented Programming or Functional Programming?
- React Application form cannot POST to my backend api
- How to use onchange on 2 input fields in React
- Redux normalised data using separate reducers