CODEWITHSUNDEEP
javascriptreactjsreact-native-mapbox-gl
Christina Stebbins
Christina Stebbins

Reputation: 488

React element not rendering when abstracted

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.

Upvotes: 0

Views: 477

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 85151

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)

Upvotes: 1

Related Questions