Is there any code i'm wrong? i can not render the API

Question

I tried to export the apiKey.js to App.js and then encounter an error

I already deleted and added any apikey not required also inspecting the error.

And i still don't understand where the error is

import React, { Component } from 'react';
import MovieCart from './components/MovieCart'
import './App.css';
import apiKey from './apiKey';
import { withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';

const styles = {
  root: {
    flexGrow: 1,
  },
};


//It will be unused 
     const originalMovies =[
     {id:1,title:'Star Treck'},
     {id:2,title:'Star One'},
     {id:3,title:'Star Tol'}


   ];

class App extends Component {
  state={movies: []};

   async componentDidMount (){

    const response = await fetch(
  `    https://api.themoviedb.org/3/movie/top_rated?api_key=${apiKey}`
   );
    const json = await response.json();
    this.setState({ movies: json.results }); --> here i got an error said    movies undefined
  }
  render() {
    const {movies} = this.state;   -- i define the movies on it

    return (
       <div>
     <AppBar position="fixed" color="default">
       <Toolbar>
          <Typography variant="h6" color="inherit">
           The Lin MVP
          </Typography>
        </Toolbar>
      </AppBar>


      <div className="movies">
      {movies.map(movie => <MovieCart key={movie.id} movie={movie}/>)}
      </div>
      </div>
    );
  }
}

export default withStyles(styles)(App);

i want to see something rendered from API

Do you have a more complete code? I'm getting the result from the API (my key). Also [check this](https://stackoverflow.com/questions/47970276/is-using-async-componentdidmount-good) — trinaldi, Apr 06 '19 at 02:37

score 0 · Answer 1 · answered Apr 06 '19 at 02:56

I changed the way you call componentDidMount to use Promises:

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

componentDidMount(){

    const response = fetch(`https://api.themoviedb.org/3/movie/top_rated?api_key=${youAPIKey}`)
    .then(r => r.json())
        .then(x => this.setState({ movies: x.results })); 
  }

in order to best reflect the discussion here. That's what was causing your errors.

You can check a simple boilerplate here

Is there any code i'm wrong? i can not render the API

1 Answers1