React Native: What is the best way to make a list of button elements given data from a Fetch(Url) request?

Question

I want to make a list of button elements that the user can tap. The amount of button elements will vary from 3 - 5 depending on the result of a fetch request that I do. I know how to populate a flatlist based on the result of a fetch request but not the contents of a button. Any help?

For example, using this JSON, suppose I wanted to render buttons for the amount of movies in there, each button having the name of the movie. The amount of movies will vary.

You want to render a list of botton and each button should have different onclick actions. Is that so. — Mohammed Ashfaq, Aug 20 '18 at 05:30
Can you please share the list of data based on which you want to render the buttons. — Mohammed Ashfaq, Aug 20 '18 at 05:33
@MohammedAshfaq I have edited my post to reflect a better example of the type of data I may use to render buttons. — hellohello, Aug 20 '18 at 21:35

Mohammed Ashfaq · Accepted Answer · 2018-08-21T06:37:39.943

If you set the movies to a state after Api response like this.

this.setState({movies: apiResponse.movies})

  

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>
    )
  }
  
  handleOnPress(movieDetails){
   alert(movieDetails.title);
  }

  render() {
    return (
      <View style={{flex: 1, justifyContent:'center', backgroundColor: "#0d98ba"}}>
        {this.state.movies.length? this.renderMovieList(): null}
      </View>
    );
  }

See full code here

score 0 · Answer 2 · edited Aug 22 '18 at 07:59

0

Fetching

Create api.
Create function fetching in sagas
Set index (sagas)
Create redux reducer to get data from fetching
In component mapping redux state to get data

Make list items

Try render function use return ListItem
It don't cluttered

edited Aug 22 '18 at 07:59

BDL

21,052
22
49
55

answered Aug 20 '18 at 02:24

Sylvie Art

21
3

React Native: What is the best way to make a list of button elements given data from a Fetch(Url) request?

2 Answers2

Linked

Related