Menu
I have created a simple React component which displays another react component. But it doesn't render in browser :
class Home extends React.Component { render() { return ( <div> <map/> </div> ); } } var map = React.createClass({ render: function() { return ( <div id="map-canvas"> <span>hello</span> </div> ); } }); I'm expecting the hello to show up on the screen, but nothing shows up and when I inspect the element all I can see is
<map data-reactid=".0.0"></map> Can any one point our what might be wrong.
307
Forcing an update on a React class component In any user or system event, you can call the method this. forceUpdate() , which will cause render() to be called on the component, skipping shouldComponentUpdate() , and thus, forcing React to re-evaluate the Virtual DOM and DOM state.
Nope, render() method can't return an empty array or anything other than other React component.
Rendering is an essential procedure a programmer has to manage in frontend development. In React, the render() method is the only required method in a class component and is responsible for describing the view to be rendered to the browser window.
Presentational Components These have also been referred to in the past as "dumb components". These components have no (or at least very little) logic, and do not use any lifecycle methods other than render() .
JSX expects component tags to be capitalized. Otherwise, it will just create a DOM element with the provided tag. See HTML Tags vs. React Components.
<map /> compiles to React.createElement("map", {}); while <Map /> compiles to React.createElement(Map, {});.
Just rename map to Map and you're good.
90
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
