React native, creating buttons in for loop

Question

I am trying to get some data from API of eventbrite.

The data is event's name, and the name will be inserted into the list.

In render, buttons are created as many as the number of name which I got from API

I have got few questions below..

How to add information from API into array list - so I can use index, and value.
How to create buttons in forloop

e.g.

for ( var i =0; i<5; i++){
 <Button
 onPress={onPressLearnMore}
 title="Learn More"
 color="#841584"
 accessibilityLabel="Learn more about this purple button"/>
} // % buttons are created.

This is my code.

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


    }
componentDidMount(){
return fetch('https://www.eventbriteapi.com/v3/events/search/location.address=glasgow&token=F7AWKEHKD6BW2TZKWO7N&expand=venue')
  .then((response) => response.json())
  .then((responseJson) => {   
      for(var x in responseJson.events){       
          this.setState({
              state : this.state[Events].push(responseJson.events[x][0][0]["text"],"\n",)
 });
}})
.catch((error) => {
    console.error(error);
});
}

render() {
        need to make buttons as many as the number of gotten name from API 
}

when you need to return something from a loop, you would usually use the [Array.prototype.map ](developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…). collection.map(b => <Button ... />) — Sagiv b.g
– Sagiv b.g, Commented Feb 7, 2018 at 14:33
I tried to put render() { var array1 = [1, 4, 9, 16]; array1.map(b => <Button ... />) } it does not work, I wanted to put button into inside of <view> which I can't do - the buttons are always in <view> — user7503333
– user7503333, Commented Feb 7, 2018 at 14:50

Isaac Sekamatte · Accepted Answer · 2018-02-07 14:54:39Z

2

For question 1, array form of api data will depend on how the data is structured before being sent to your application. You may have to shade more light on that.

Rendering views in a loop, try that

const renderButtons = () => {
const views = [];
for ( var i =0; i<5; i++){
 views.push(
    <Button
       key={i}
       onPress={onPressLearnMore}
       title="Learn More"
       color="#841584"
       accessibilityLabel="Learn more about this purple button"
    />);
} // % buttons are created. 

return views;
}

call renderButtons() in your render methods.

answered Feb 7, 2018 at 14:54

Isaac Sekamatte

5,6082 gold badges37 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user7503333 Over a year ago

and the api is eventbriteapi.com/v3/events/search/…

user7503333 Over a year ago

just wondering why the key value is not fixed. so, when I clicked a first button key values is 5, then when I clicked the first button again the key value 6 increasing by 1

user7503333 Over a year ago

do you how to get fixed key.. ?

Isaac Sekamatte Over a year ago

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity check docs

user7503333 Over a year ago

I am looking for the way of using views's index, so when you click the first button which is index 0, then the array's value which is index 0 will be retired. how would I store only the index..

|

Collectives™ on Stack Overflow

React native, creating buttons in for loop

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related