title: React Leaflet : ugly Warning: Each child in a list should have a unique "key" prop
body: <p>I've set an leaflet map component that iterate through users fetched from db that contains, for each of them, coordinates.
  Devtool throw me:</p>
  <blockquote>
  <p>Warning: Each child in a list should have a unique &quot;key&quot; prop.</p>
  </blockquote>
  <p>Not the first time I got this warning and I usually find easily how to fix it but this time I can't find a solution.</p>
  <p>All is working fine but this warning keeps triggering me</p>
  <p>Console Warning:
  <a href="https://i.stack.imgur.com/MNm7E.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MNm7E.jpg" alt="Console Warning" /></a></p>
  <p>I've tried to put the key as Marker component identifier, Popup component identifier, both of them.</p>
  <p>I've seen a post that recommend to put the key as Fragment identifier for each element of my map function. I tried in a div component (seems equal to Fragment to me?) still not working.</p>
  <pre><code>&lt;MapContainer  id={!isMobile ? &quot;browser-leaflet&quot; : &quot;mobile-leaflet&quot;} center={POSITION} zoom={15} scrollWheelZoom={true}&gt;
      &lt;TileLayer
      attribution='&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
      url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?lang=fr&quot;
      /&gt;
      {contacts.map(contact =&gt; (
          &lt;div key={contact.email}&gt; &lt;-- last try here
              &lt;Marker //also tried here// position={[contact.lat, contact.lon]} icon={new Icon({iconUrl: contact.is_client ? markerIconClient : markerIconProspect, iconSize: [25, 41], iconAnchor: [12, 41]})}&gt;
                  &lt;Popup //also tried here// offset={[0, -15]}&gt;
                      &lt;p style={{marginBottom: &quot;1vh&quot;, textAlign: &quot;center&quot;, fontSize: &quot;1.5em&quot;}}&gt;
                          {contact.raison_sociale}
                      &lt;/p&gt;
                      &lt;Button variant=&quot;sub&quot; className=&quot;mx-auto&quot; style={{border: &quot;teal&quot;, borderRadius: &quot;15px&quot;, fontSize: &quot;1em&quot;, display: &quot;flex&quot;, justifyContent: &quot;center&quot;}}&gt;
                          &lt;a 
                          href={&quot;https://www.waze.com/fr/live-map/directions?navigate=yes&amp;to=ll.&quot; + contact.lat + &quot;%2C&quot; + contact.lon}
                          style={{textDecoration: &quot;none&quot;, color: &quot;black&quot;, backgroundColor: &quot;#D0FCB3&quot;}}
                          &gt;
                              Allez-y
                          &lt;/a&gt;
                      &lt;/Button&gt;
                  &lt;/Popup&gt;
              &lt;/Marker&gt;
          &lt;/div&gt;
      ))}
      &lt;SetMap /&gt;
  &lt;/MapContainer&gt;
  </code></pre>
  <p>Error seems to be located @Geolocalisation.jsx (my whole page compo) line:102 which is where I set style and navbar based on client device.</p>
  <pre><code>return ( &lt;--- here l:102
          &lt;&gt;
              {!isMobile ? (
                  [
                      &lt;BrowserSidenav /&gt;, 
                      &lt;style&gt;
                          {browserLeafletContainer}
                      &lt;/style&gt;
                  ]
              ) : (
                  &lt;style&gt;
                      {mobileLeafletContainer}
                  &lt;/style&gt;
              )}
  </code></pre>
  <p>Does someone knows how to fix it?
  (P.S: sorry for bad English, not native and not using online translator)</p>
  <p>Whole return from my component Geolocalisation.jsx : (funcs are just a users fetch, a useEffect that delete users with no lat/lon.</p>
  <pre><code>return (
          &lt;&gt;
              {!isMobile ? (
                  [
                      &lt;BrowserSidenav /&gt;, 
                      &lt;style&gt;
                          {browserLeafletContainer}
                      &lt;/style&gt;
                  ]
              ) : (
                  &lt;style&gt;
                      {mobileLeafletContainer}
                  &lt;/style&gt;
              )}
  
              &lt;MapContainer  id={!isMobile ? &quot;browser-leaflet&quot; : &quot;mobile-leaflet&quot;} center={POSITION} zoom={15} scrollWheelZoom={true}&gt;
                  &lt;TileLayer
                  attribution='&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
                  url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?lang=fr&quot;
                  /&gt;
                  {contacts.map(contact =&gt; (
                      &lt;div key={contact.email}&gt;
                          &lt;Marker position={[contact.lat, contact.lon]} icon={new Icon({iconUrl: contact.is_client ? markerIconClient : markerIconProspect, iconSize: [25, 41], iconAnchor: [12, 41]})}&gt;
                              &lt;Popup offset={[0, -15]}&gt;
                                  &lt;p style={{marginBottom: &quot;1vh&quot;, textAlign: &quot;center&quot;, fontSize: &quot;1.5em&quot;}}&gt;
                                      {contact.raison_sociale}
                                  &lt;/p&gt;
                                  &lt;Button variant=&quot;sub&quot; className=&quot;mx-auto&quot; style={{border: &quot;teal&quot;, borderRadius: &quot;15px&quot;, fontSize: &quot;1em&quot;, display: &quot;flex&quot;, justifyContent: &quot;center&quot;}}&gt;
                                      &lt;a 
                                      href={&quot;https://www.waze.com/fr/live-map/directions?navigate=yes&amp;to=ll.&quot; + contact.lat + &quot;%2C&quot; + contact.lon}
                                      style={{textDecoration: &quot;none&quot;, color: &quot;black&quot;, backgroundColor: &quot;#D0FCB3&quot;}}
                                      &gt;
                                          Allez-y
                                      &lt;/a&gt;
                                  &lt;/Button&gt;
                              &lt;/Popup&gt;
                          &lt;/Marker&gt;
                      &lt;/div&gt;
                  ))}
                  &lt;SetMap /&gt;
              &lt;/MapContainer&gt;
          &lt;/&gt;
      )
  </code></pre>