Below code is the function for displaying the movie's images with different categories. The browser and vs code doesn't show an error but still, I cannot get the result. help!!
function Row({ title, fetchUrl, isLargeRow = false }) {
const [movies, setMovies] = useState([]);
const base_url = "https://image.tmdb.org/t/p/w500/";
useEffect(() => {
async function fetchData() {
const request = await axios.get(fetchUrl);
setMovies(request.data.results);
return request;
}
fetchData();
}, [fetchUrl]);
// console.log(movies);
return (
<div className="row">
<h2>{title}</h2>
{movies.map((movie) => (
<img
// "https://image.tmdb.org/t/p/w500/" + movie.poster_path || movie.backdrop_path
src={
"${base_url}${isLargeRow ? movie.poster_path:movie.backdrop_path}"
}
alt={movie.name}
/>
))}
</div>
);
}
export default Row;
Here for this code "${base_url}${isLargeRow ? movie.poster_path:movie.backdrop_path}", I tried to replace (") with backtik(') but the vs code replace back on saving.