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

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> ) } }

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

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

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

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); } }

Collectives™ on Stack Overflow

React Display Data from API Fetch & Map

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related