How to get button's index

Question

I used to make bunch of buttons through for-looping. title[] has a lot of values.

export const renderButtons1 = (numOfBtns,title,navigate) => {
    const views1 = [];  
    for ( var i = 0; i < numOfBtns; i++) {
            views1.push(
            <Button 
                 key={i}         
                 title = {title[i]}
                 onPress={() => navigate('List', { 
                     Title : title[i]
                })}
                 color="#841584"
             />);


      }

    return views1;
}

in EventListscreen, Title: title[i] does not work, i value is not recognized

the one I want to ask is when I click first button, index 0 will be retrieved.

I thought I can use button key, but it is not fixed value - when I click first button at first and at second time, it is different..

I dont understand. When you click the first button a second time it will be different? — Adelin, Feb 14 '18 at 14:25
for example, when you click first button at first , key value is ID-1223123-4 and when you click first button again key value will be ID-1223123-5 — user7503333, Feb 14 '18 at 14:26
well it seems that it does not matter of clicking first button - although you click second button at first the key value is 1223123-4, and when you click first button , key value is ID-1223123-5 — user7503333, Feb 14 '18 at 14:27
you mean onPress ?? so when you click you can move to Bscreen — user7503333, Feb 14 '18 at 14:28
whats the problem with that? different unique keys... I dont really understand the main problem. — Cristian S., Feb 14 '18 at 14:28
oh okay, so I basically all the data stored into the title as array from API, then I tried to make buttons as many as the number of data from API. so as you can see, when button is created, the button's title come from title[i] array. the problem is that when you click button called "ABC" as one of title from API, it will move to Bscreen but, it is not retrieved "ABC"'s information — user7503333, Feb 14 '18 at 14:32
so I might need some index or fixed key which can identify the button you clicked to retrieve correct value — user7503333, Feb 14 '18 at 14:33
Also: what does the `navigate` function do? Are you using the library `react-navigation`? And what does the variable `title` contain? — jjjjjjjjjjjjjjjjjjjj, Feb 14 '18 at 14:37
is there hashmap in react native insted of using views1 array.. ? — user7503333, Feb 14 '18 at 15:12
Possible duplicate of [Asynchronous Process inside a javascript for loop](https://stackoverflow.com/questions/11488014/asynchronous-process-inside-a-javascript-for-loop) — Etheryte, Feb 14 '18 at 16:01

score 0 · Accepted Answer · answered Feb 14 '18 at 15:59

I found the way, you guys need to make the function for making buttons

so it looks like this

export const makingbutton = (i,ttl,navigate) => {
  return   <Button 
             key={i}         
             title = {ttl[i]}
             onPress={() => navigate('List', { 
                 Title : title[i]
            })}
             color="#841584"
         />


}

export const renderButtons1 = (numOfBtns,title,navigate) => {
const views1 = [];  
for ( var i = 0; i < numOfBtns; i++) {
        views1.push(
          makingbutton(i,title,navigate)
      );


  }

return views1;
}

How to get button's index

1 Answers1