My react app is live but renders only for one sec and then components disappers

https://lucid-brahmagupta-52965d.netlify.app/

my app is running perfectly in development but when i deployed it , it just renders one sec and then disappers … help me with it

thank you

I’m assuming it has to do something with the errors in the code:

This would indicate something wrong in the code that’s written to publish this website.

here is my git link can you once check whats wrong

@abhishek-atnure the error is coming from the passed prop movies in the following code on first render.

/src/components/favoriteList/FavoriteList.js

import React from "react";

function FavoriteList({ movies, handleFav }) {
  return (
    <div className="movie-list">
      {movies.length > 0 &&
        movies.map((movie) => (
          <div className="movie">
            <img src={movie.Poster} alt=""></img>
            <h3>{movie.Title}</h3>
            <span>{movie.Year}</span>
            <button onClick={() => handleFav(movie)}>Remove favorite</button>
          </div>
        ))}
    </div>
  );
}

export default FavoriteList;

Try something like the following to confirm:

import React from "react";

function FavoriteList({ movies, handleFav }) {
  return (
    <div className="movie-list">
      {movies && movies.length > 0 &&
        movies.map((movie) => (
          <div className="movie">
            <img src={movie.Poster} alt=""></img>
            <h3>{movie.Title}</h3>
            <span>{movie.Year}</span>
            <button onClick={() => handleFav(movie)}>Remove favorite</button>
          </div>
        ))}
    </div>
  );
}

export default FavoriteList;

I would refactor to a more sustainable solution, but this might give you a hint of where the issue is located.

1 Like