-
Notifications
You must be signed in to change notification settings - Fork 0
/
multipleButtons.js
55 lines (49 loc) · 1.44 KB
/
multipleButtons.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//https://stackoverflow.com/questions/51923226/react-native-what-is-the-best-way-to-make-a-list-of-button-elements-given-data
import React, { Component} from 'react';
import {
View,
Button,
} from 'react-native';
import {COLORS} from 'src/config/ENV';
export default class multipleButtons extends Component {
constructor(props: Object) {
super(props);
this.state =
{
movies: [
{ "id": "1", "title": "Star Wars", "releaseYear": "1977" },
{ "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
{ "id": "3", "title": "The Matrix", "releaseYear": "1999" },
{ "id": "4", "title": "Inception", "releaseYear": "2010" },
{ "id": "5", "title": "Interstellar", "releaseYear": "2014" }
]
}
};
handleOnPress(movieDetails){
alert(movieDetails.title);
}
renderMovieList(){
return this.state.movies.map((movie, i, movieArray) =>
<View
key={movie.id}
style={{
height:50,
padding:20
}}>
<Button
onPress={()=> this.handleOnPress(movie)}
title={movie.title}
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
</View>
)
}
render() {
return (
<View style={{flex: 1, justifyContent:'center', backgroundColor: COLORS.backgroundColor}}>
{this.state.movies.length ? this.renderMovieList(): null}
</View>
);
}
}