leaflet.css | Add CSS programmaticly in Leaflet | User Interface library

I'm trying to link the list with the leaflet map. I want to click on a result card and see the marker on the map. I'm using fake data for now in json format. I would like a display like airbnb, list plus display the list on map.

This is the map file :

I have a table called location in my database which consists of latitude and longitude I need to mark them on the map using leaflet open street map. And I have no idea how do I do that. Till now I am only able to mark manually. If you have any resources from where I can get idea please help

This is my database:

I use leaflet map ,this map can show my location (I success)
I hope I can update my location 10 second a time (just this div field, other data not to update)
but now I just can update hole page to update my map, how can I do to update partial page? this is my code:

This is probably an easy fix, but I haven't been able to figure it out. How do I get this map to show full screen without scroll bars?

I'm mostly a python developer but I'm trying my way in JavaScript and HTML for a university project. I'm using Leaflet to create a map and am currently trying to add some nodes to the map, using the coordinates, and subsequently adding edges to them. But for some reason it won't recognize the longitude. Here are my code and error:

1. HTML

I'm trying to create a Leaflet map, that automatically adds markers and polylines between destinations from a Google sheet.

I've managed to set up a map from other examples which is linked to my Google Sheet. You see the example here:

i'm running into the behavior, that i must run the useEffect Hook only once in react. the reason is mainly because i have to init a leaflet.js map which must not happen more than once.

but whenever i change something in the components jsx, the "Hot Reload" feature of the DevServer seems to ignore useEffects 2nd argument [] and re-run it anyway, although the state of coachmap persists. This behavior throws an error: map is already initialised which can only be fixed by reloading the browser tab.

Do you have any Idea how I can prevent react to re-initialise leaflet?

I've already tried to check if typeof coachmap == 'undefined' which strangely still re-initialises the map.

Here is my Component Code:

I tried to use function component to load the leafletmap but got an error saying "Map container not found". I found a solution which is to add

I'm trying to create a react-bootstrap navbar with a toggling element(which will be a chart.js element but is currently just a placeholder image.

For some reason I am getting an export error when the page loads: