react-leaflet <GeoJSON /> pointToLayer option to change

Question

I am learning react leaflet and trying to add circle marker on each point of geojson. Makers are not showing on map.

import React from 'react';
import Tiles from "./Tiles";
import L from 'leaflet'
import 'leaflet/dist/leaflet.css';
import '../css/MapStyle.css'
import Test from "../json/Test.json"
import {GeoJSON, MapContainer} from "react-leaflet";

function App() {
    function point(feature, latlng){
        return L.circleMarker(latlng);
    }
    return (
        <MapContainer center={[-105.003418922432, 45.75383843460583]} zoom={2} scrollWheelZoom={true}>
            <TileLayer
            url="https://api.maptiler.com/maps/basic/256/{z}/{x}/{y}.png?key=fXmTwJM642uPLZiwzhA1"
            attribution='&copy; <a href="https://www.maptiler.com/">MapTiler</a> &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
            <GeoJSON data={Test} pointToLayer={(a, b)=>{point(a, b)}}/>
        </MapContainer>
    );
}

export default App;

I have also tried placing null as argument in circleMarker. But doesn't work.

Answer 1

Perhaps you should add the key param with unique value.

<GeoJSON key={Date.now()} data={Test} pointToLayer={(a, b)=>{point(a, b)}}/>

Answer 2

Your problem is not really connected to react-leaflet. You are missing return in your arrow function. Because of that, no value is actually returned from the function, hence there is nothing to be rendered.

It should be either

<GeoJSON data={Test} pointToLayer={(a, b)=>{ return point(a, b) }}/>

or simply:

<GeoJSON data={Test} pointToLayer={point}/>