(React Native) Retrieving next value in JSON file when button is pressed

Question

Let's say I have a local JSON file (./movies.json) structured as

{ "movies": [ 
    { "title" : "Terminator", "year" :  "1984", "genre" : "Action" },
    { "title" : "Jumanji", "year" : "2017", "genre" : "Adventure"},
    { "title" : "Incredibles 2", "year" : "2017", "genre" : "Animation"}]
}

Whenever a button is clicked, I want to output, for example, a Text Field with Terminator --> Jumanji --> Incredibles 2, in order. I also want to be able to access all three of "title", "movie", "genre" (in separate text fields) in order, when the button is clicked.

This is what I have so far, to get just the titles of the movies in order.It doesn't work, because I don't think I'm pulling from the JSON file correctly.

import jsonData from "./movies.json";

export default class Movies extends React.Component {
  constructor(props) {
  super(props);
      this.state = {
         results:{
         titles: [],
         years: [], 
         genres: []
       }
     }
  };
}
componentDidMount = () => {
  // const data = json.stringify(jsonData)  I think this line is not correct 
  this.setState({ data })
}
render () { 
  titles_list = this.state.results.titles.map((item) => {
  return (
      <View key={item.title}>
        <Text>
          {item.title}
        </Text>
      </View>
    );
 });
return (
  <View>
    {titles_list}
  </View>
);
}
}

I'm not sure how to implement a button so that when it is pressed, the next title/year/genre is shown. Help would be appreciated. Thanks!

asosnovsky · Accepted Answer · 2017-12-19 19:32:25Z

1

Store the index of the array in a state variable. First of all, I will assume that you passed that json into state.movies

So initialize it as follows:

   this.state = {
     movies: [], // where the movies are
     displayIndex: 0 // This will be the index that you show
   }

When you press your button call a function that will call either of the following functions:

moveForward(){
  this.setState({displayIndex: this.state.displayIndex++})
}
moveBack(){
  this.setState({displayIndex: this.state.displayIndex--})
}

Then when you display the fields under your render function grab the object you need as follows:

render(){
   const movieData = this.state.movies[this.state.displayIndex];
   ....//Do the display logic here

answered Dec 19, 2017 at 19:32

asosnovsky

2,2353 gold badges26 silver badges42 bronze badges

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

3 Comments

alphamonkey Over a year ago

Thanks! The only problem I'm having now is I'm not sure how to pull that movies JSON local file and set just the titles, genres, years in the lists (like the movies: [] you created). Could you explain that part?

asosnovsky Over a year ago

You going to need to have something hosting the json, or simply have the json hardcoded in the js. If its hosted you will need something like npmjs.com/package/axios to pull it. If its hard-coded, simply have the component load it with .setState or pass into the props of the component (the latter is more inline with the "react-way")

alphamonkey Over a year ago

import jsonData from "./data.json"; componentDidMount = () => { this.setState({ jsonData }) } - Would this be the right way?

Collectives™ on Stack Overflow

(React Native) Retrieving next value in JSON file when button is pressed

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related