React Display Data from API Fetch & Map

Question

i'm attempting to learn React by making a movie web app. Im trying to pull upcoming movies from a movie api, and display information from it, however i keep getting an error:

Line 37: Expected an assignment or function call and instead saw an expression no-unused-expressions

Please excuse me as im not too familiar with this framework and im not a JS pro. Heres my code:

    export default class Upcoming extends Component {

    state = {
        upcomingMovies: []
      }

      fetchUpcoming() {
          fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`)
              // We get the API response and receive data in JSON format...
              .then(response => response.json())
              // ...then we update upcomingMovies State
              .then(data =>
                  this.setState({
                      upcomingMovies: data.results
                  })
              )
    }

    componentDidMount(){
        this.fetchUpcoming();
    }

  render() {

    return(
        <Container>
            { this.state.upcomingMovies.map((upcomingMovie) => {
                console.log(upcomingMovie);
                const title = upcomingMovie.title;
                console.log(title);
                <h1>{title}</h1>
            })}

        </Container>
    )

  }

}

Shivam_Yadav · Accepted Answer · 2020-07-06 09:34:42Z

1

Map function should return something to generate ui.

    export default class Upcoming extends Component {

    state = {
        upcomingMovies: []
      }

      fetchUpcoming() {
          fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`)
              // We get the API response and receive data in JSON format...
              .then(response => response.json())
              // ...then we update upcomingMovies State
              .then(data =>
                  this.setState({
                      upcomingMovies: data.results
                  })
              )
    }

    componentDidMount(){
        this.fetchUpcoming();
    }

  render() {

    return(
        <Container>
            { this.state.upcomingMovies.map((upcomingMovie) => (
               <h1>{upcomingMovie.title}</h1>
            ))}
        </Container>
    )

  }

}

edited Jul 6, 2020 at 9:34

Shivam_Yadav

2142 silver badges18 bronze badges

answered Mar 4, 2019 at 2:30

sathish kumar

1,5171 gold badge12 silver badges19 bronze badges

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

Comments

vardaan · Accepted Answer · 2019-03-04 02:03:23Z

0

You're missing a return statement in the last line of your map function. It should be return <h1>{title}</h1>

answered Mar 4, 2019 at 2:03

vardaan

11 silver badge3 bronze badges

Comments

Vu Luu · Accepted Answer · 2019-03-04 03:01:21Z

0

You should write fetchUpcoming by using arrow function. So, you can use this.setState() method on scope of fetchUpcoming function. EX:

const fetchUpcoming = async() {
  try {
    let response = await fetch(
      `https://api.themoviedb.org/3/movie/upcoming?api_key=${API_KEY}&language=en-US&page=1`,
    );
    let responseJson = await response.json();
    return this.setState({
                      upcomingMovies: responseJson.data.results
                  })
  } catch (error) {
    console.error(error);
  }
}

answered Mar 4, 2019 at 3:01

Vu Luu

8005 silver badges16 bronze badges

Collectives™ on Stack Overflow

React Display Data from API Fetch & Map

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related