I have a little doubt. How can I make the marker parameter change to marker1, marker2, marker3 depending on how many elements are in the map?

i have this but i want that for each element of the map there is a 1 for each marker

            {teams.map((team) =>
            <pointer
            marker={marker1}

for example, that the first element of the .map has the parameter {marker1}, the second {marker2}, the third {marker3} and so on

CodePudding user response：

Depending on how would you like to handle the clicks, but in general, you can use the index of the team when mapping the teams array.

More about .map()

Example:

teams.map((team, index) => <pointer marker={`marker-${index   1}`} />)

Or if you prefer to pass the value to click event directly:

teams.map((team, index) => (
  <pointer onClick={() => handleClick(`marker-${index   1}`)} />
))

When doing the .map() ensure to also set a unique key on the mapped component.

Hope this will help!

CodePudding user response：

if markers are some variables one solution can be that you can make an array of variables of markers like let markersArray = [marker1 , marker2 , ...] and then use the index in the map method to index the marker variable in each loop like

{
    teams.map((team,index) =>
        <pointer
         marker={markersArray[index]}
}

CodePudding user response：

Let your array is 
**const markersArray = [....]** 

In jsx, 
 markersArray.map((team, index) => {
     <pointer
         marker={markersArray[index]}
})

you can identify the object on basis of the index.