Attempting to map data to create elements - elements are not appearing. When the elements are hard coded in, (Markers) they work fine. When I attempt to abstract it, the Markers are not rendered. Codebox is below.
https://codesandbox.io/s/lucid-leakey-hckm2k?file=/src/App.js
Update https://codesandbox.io/s/lucid-leakey-hckm2k?file=/src/App.js It now enters the make marker code, but does not actually render the circles as expected or as it does when I directly call the elements.
function makeMarker(datum, pixelScale) {
Components receive props in a single object, not as separate arguments. Additionally, custom components need to be in upper case, because lowercase JSX is reserved for built in elements like <div>. So do the following:
function MakeMarker(props) {
const { datum, pixelScale } = props;
// Or:
function MakeMarker({ datum, pixelScale }) {
(Technically, you could have it be lower case on this line, and then upper case when you import it, but probably best to be consistent and use uppercase everywhere)