react-native fetch api arrays

Question

I am trying to fetch facebook movie data using axios. In my console, I see the fetched data, but I have trouble getting when I want to access the title text.

 class BoardScreen extends Component {

      constructor(props) {
         super(props);
         this.state = { movies: [] };
      }

        componentWillMount() {
          axios.get('https://facebook.github.io/react-native/movies.json')
            .then(response => this.setState({ movies: response.data }));
        }

renderMovies() {
return this.state.movies.movies.map(movies => <Text>{movies.title}</Text>)
}

      render() {
if(this.state.movies.length === 0) {
     return null;
   }
        console.log(this.state.movies.title, 'movies')

        return (
          <View>
          {this.renderMovies()}
          </View>
                )
              }
            }

The code above only will give me the main title text The Basics - Networking What I really want is to access to each movie title and display.

How could I fetch each array title?

Just code · Accepted Answer · 2018-12-21 04:55:58Z

4

What you need is this looping through it and bind the data.

this.state.movies.movies.map(a=>{
           return <div key={a.id}>{a.title}</div>
        })

Ofcourse you need to check if movies is not null, so render should look like this

  render() {

    if(this.state.movies.length === 0) {
      return null;
    }
    console.log(this.state.movies.movies, 'movies');

    return (
        this.state.movies.movies.map(a=>{
           return <div key={a.id}>{a.title}</div>
        })       

    )
  }

Demo

IMO, would be be very very easy if you just have looked here

edited Dec 21, 2018 at 4:55

answered Dec 21, 2018 at 4:53

Just code

13.8k10 gold badges54 silver badges94 bronze badges

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

6 Comments

kirimi Over a year ago

I edited your code to react-native version but not getting the result like yours. Could you please check?

Just code Over a year ago

@kirimi let me check

kirimi Over a year ago

@Justcode thanks btw I meant {renderMoives()} I just edited :)

Just code Over a year ago

@kirimi you forgot to include return in renderMovies just add return this.state.movies.movies.map(movies => <Text>{movies.title}</Text>) and should work.

kirimi Over a year ago

You are right I added return and worked. I edited my code too!

|

Patel Dhara · Accepted Answer · 2018-12-21 05:58:32Z

1

add return statement in renderMovie() method.

renderMovie() {
  return this.state.movies.movies.map(movies => {
 return <Text>{movies.title}</Text>
})
}

answered Dec 21, 2018 at 5:58

Patel Dhara

8867 silver badges16 bronze badges

Comments

Pyae Phyoe Shein · Accepted Answer · 2018-12-21 05:04:46Z

0

class BoardScreen extends Component {

    constructor(props) {
        super(props);
        this.state = { movies: [] };
    }

    componentWillMount() {
        axios.get('https://facebook.github.io/react-native/movies.json')
        .then(response => this.setState({ movies: response.data }));
    }

    render() {
        return (
            <View>
                this.state.movies.movies.map((movie) =>
                    < Text key={movies.id}>
                        {movie.title}
                    </Text>
                );
            </View>
        )
    }
}

edited Dec 21, 2018 at 5:04

answered Dec 21, 2018 at 4:55

Pyae Phyoe Shein

13.9k47 gold badges153 silver badges244 bronze badges

Collectives™ on Stack Overflow

react-native fetch api arrays

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related