React not returning multiple components

Question

I am using the Google maps api to show the list of markers on the google map along with the info window. This code correctly iterates through all the location coordinates and places markers for each lat and longitude. For each marker, I want to show a separate infowindow should appear, but the code below gives error for some mismatching brackets.

Here is the code;

return (
    <div>
      <Fragment>
      <GoogleMap
        // options = {options}
        id="circle-example"
        zoom={12}
        center={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
        mapContainerClassName="map-container"
      >
        <Circle center={center} radius={10} options={options} />

        {markers && markers.map(({ email, latitude, longitude }) => (   
        
        <Marker
         key = {email}
          position={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
          onClick={() => {
            setSelected({
              lat: parseFloat(latitude),
              lng: parseFloat(longitude),
            });
            console.log(selected);
          }}
          icon={{
            url: "/personicon.png",
            scaledSize: new window.google.maps.Size(25, 25),
          }}
        />
               **// ))}   error gets removed when I place the brackets here.**      
        
        {selected && (
          <InfoWindow
            //    position={{lat: selected.lat, lng:selected.lng}}
            position={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
            onCloseClick={() => {
              console.log("selected"+selected);
              setSelected(null);
            }}
          >
            <div>
              {latitude}, {longitude}
            </div>
          </InfoWindow>
        )}
  
          ))}    **//error appears when I put this brackets here But I want these the bracket         here to include the infowindow component for each marker**

        <Circle
          center={{ lat: parseFloat(latitude), lng: parseFloat(longitude) }}
          radius={500000}
        />
      </GoogleMap>
      </Fragment>
    </div>
  );
}

I have tried to use fragmant and div tags but nothing helped.

Answer 1

If you need to show InfoWindow for each marker you need to add React.Fragment, because you can't return a single element

{markers && markers.map(({ email, latitude, longitude }) =>  {
   
   // this should return a single element
   return(
     <React.Fragment>
        <Marker
          ... marker props 
          onClick={() => {
             // set selected email
             // or other unique key for the marker like id
             // since two emails can have same coordinates
             setSelected({
               lat: parseFloat(latitude),
               lng: parseFloat(longitude),
               email 
             });
             // of create another state
             //setSelectedEmail(email)
             console.log(selected);
             
          }}
        />
        {(email?.email === email) && (
        <InfoWindow
          ... props
        </InfoWindow>
        )}
      </React.Fragment>
    ) // end of return inside the list
 })}

Hope this solves your problem