0

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.

Christina Stebbins
  • 380
  • 3
  • 14
  • 1
    According to @Nicholas Tower answer, change the line 136 from App.js to `MakeMarker({datum, pixelScale})` –  Mar 06 '22 at 15:54
  • I did that - it did not seem to fix anything. I put the changes back, as you can see now, and while it logs that I am in the marker, nothing is rendered ON the map – Christina Stebbins Mar 06 '22 at 15:57

1 Answers1

1
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)

Nicholas Tower
  • 72,740
  • 7
  • 86
  • 98
  • I made that update, but the codepen still will not render the components. Could you fork my sandbox and make the edit to get it to work? – Christina Stebbins Mar 06 '22 at 15:37
  • One reason I am concerned is that my print statement, console.log("IN"), is not being logged in the console. I am not sure why – Christina Stebbins Mar 06 '22 at 15:38
  • 1
    Here's a working sandbox. Where you were doing `fullData.map`, you weren't returning `` elements: https://codesandbox.io/s/spring-microservice-kkjho7 – Nicholas Tower Mar 06 '22 at 17:34