ReferenceError: Can't find variable: loadMoviesLikedDetails (React Native)

Question

I'm new to React Native and I have this project where I have a ReferenceError error, When I get into a page that display all movies the user liked, I have this:

ReferenceError: ReferenceError: Can't find variable: loadMoviesLikedDetails

Here's a part of the code of the component:

class LikedScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      moviesLikedDetails: []
    };
  }

  componentDidMount() {
    loadMoviesLikedDetails(); <-- SEEMS LIKE THIS CREATES THE ERROR
  }

  loadMoviesLikedDetails() {
    this.props.likedFilms.forEach(async movie => {
      const dataDetail = axios.get(
        `https://api.themoviedb.org/3/movie/${movie}?api_key=${API_KEY}&language=fr`
      );
      this.setState({
        moviesLikedDetails: [...this.state.moviesLikedDetails, dataDetail.data]
      });
    });
  }

  render() {
      return (
        <View style={styles.container}>
            {this.state.moviesLikedDetails.map(movie => (
              <View style={{ display: "flex", flex: "wrap", width: "25%" }}>
                {movie.id}
              </View>
            ))}
        </View>
      );
  }
}

It looks like the error comes from the execution of the function in the componentDidMount...

Answer 1

You are missing a this.loadMoviesLikedDetails() in the componentDidUpdate

Also, you can define your state this way, rather than a constructor

  state = {
    moviesLikedDetails: []
  }

You can also check hooks