create multiple buttons in a view via loop

Question

I want to create multiple custom buttons for my react-native app. I'm using an array with all the informations in it and I want to iterate over all buttons in the array and create all buttons in one single view. I tried something like this:

<View>
  for( let i=0; i<numberButtons; i++) {
          <TouchableOpacity style={[styles.mapView, this.props.mapViewStyle]} >
            <Image
              style={[styles.image, this.props.imageStyle]}
              source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
            />
          </TouchableOpacity>
}
</View>

That doesn't seem to work. I get errors from the react-native framework so I guess you can't do js in a view?

How can I do this?

Matt Aft · Accepted Answer · 2017-01-06 22:56:09Z

4

You can do it like this:

renderButtons = () => {
  const buttons = [];
  for( let i = 0; i < numberButtons; i++) {
     buttons.push(
      <TouchableOpacity style={[styles.mapView, this.props.mapViewStyle]}>
        <Image
          style={[styles.image, this.props.imageStyle]}
          source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
        />
      </TouchableOpacity>
    )
  }
  return buttons;
}



render() {
  return (
    <View>
      {this.renderButtons()}
    </View>
  )
}

edited Jan 6, 2017 at 22:56

answered Jan 6, 2017 at 22:12

Matt Aft

8,9663 gold badges28 silver badges38 bronze badges

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

4 Comments

ViktorG Over a year ago

ok cool, thank you:) Can you explain why I can't iterate and do stuff the "normal" way?

Matt Aft Over a year ago

Sure, anytime you want to use javascript you will have to put it into brackets { }, I believe whatever you return in the render will be read as JSX.

ViktorG Over a year ago

Oh wait. It seems like it is not working. Don't I need to return() the created touchableOpacity ?

ViktorG Over a year ago

something like this? exampleAlthough it's not working like that.

Collectives™ on Stack Overflow

create multiple buttons in a view via loop

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related