javascriptreactjsreact-native-mapbox-gl

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.


Solution

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