Simple Component Is Not Rendering: React Js

Simple React component not rendering

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.

React components not rendering on browser but not showing errors

The fix to the issues are these two lines on the DishDetailComponent.js within the render() part. Instead of using 'state' I've used 'props', and instead of 'selectedDish' I've used 'dish'. This is because of relying from the parent component MainComponent.js for the state and properties. Please refer to the below changes.

'''

{this.renderDish(this.props.dish)}

...

{this.renderComments(this.props.dish)}

'''

Related Topics