HERE Maps React Component shows up as empty - reactjs

Question

I am attempting to make a small web app with React that involves a map. I'm using the HERE Maps react component (this is non-negotiable) but I'm having trouble getting the map to show up. I'm not sure if it's the Key or my understanding of React (which is small), that's causing the issue.
Map Component
import React from "react";
import { connect } from "react-redux";
import HEREMap from "react-here-maps";
#connect((store) => {
return {
};
})
export default class Map extends React.Component {
render() {
console.info(HEREMap);
const style = {
width: "100%",
height: "100%"
};
return <div style={style}>
<h1>Hello HERE</h1>
<HEREMap
appId="<ID>"
appCode="<CODE>"
center={{ lat: 51.5, lng: 0 }}
zoom={14}
/>
</div>
};
};
Main
import React from "react"
import ReactDOM from "react-dom"
import { Provider } from "react-redux"
import Map from "./components/Map"
import Layout from "./components/Layout"
import store from "./store"
const app = document.getElementById('app')
ReactDOM.render(
<Provider store={store}>
<Map />
</Provider>, app);

Answer 1

I noticed this in you code listing:
const style = {
width: "100%",
height: "100%"
};
A common problem is that the height of a block element like <div> defaults to the height of the block's content. By specifying it as a percentage like 100%, it will be the height of the element's parent which if it's just an empty container with no content will have a height of 0 and therefore not be visible.
The answers in Percentage Height HTML 5/CSS might be helpful for finding alternatives like setting the height of the body element.
There may also be something else going on as the react-here-maps package has a few issues, but you said that wasn't negotiable. For anybody else looking for a more standalone demonstration, the Use HERE Interactive Maps with ReactJS to Pick a Theme might be helpful. In the source example there, the height is fixed at 400px.