I am creating a simple movie website using React, the details such as name, genre, description e.t.c all are displayed except for the movie image which is provides in the movie_data.js file. How do I solve this and what could be the issue?
movie_data.js file:
export default [
{
id: 1,
name: "Oppenheimer",
image:"../images/opennheimer.jpg",
description: "The story of J. Robert Oppenheimer’s role in the development of the atomic bomb during World War II.",
Genre: "Biography, Drama, History",
Actor: "Cillian Murphy, Emily Blunt, Robert Downey Jr",
Director: "Christopher Nolan",
Country: "United States, United Kingdom"
}
]
movie_component.js file:
function MovieComponent(prop)
{
return (
<div className="movie-container">
<img src={prop.items.image} alt={prop.items.name}/>
<h2>{prop.items.name}</h2>
<p>{prop.items.description}</p>
<p>{prop.items.Genre}</p>
<p>{prop.items.Actor}</p>
<p>{prop.items.Director}</p>
<p>{prop.items.Country}</p>
</div>
)
}
movie_app.js file:
function MovieApp()
{
const movieElements = movie_data.map(function(dataItems){
return <MovieComponent id={dataItems.id} items={dataItems}/>
})
return (movieElements)
}
I expected the images for each movie to be displayed, however I only get text details.
1
// MovieApp Component
function MovieApp() {
return (
{movie_data.map(dataItem => (
))}
);
}
// MovieComponent Component
function MovieComponent({ items }) {
return (
{items.name}
{items.description}
{items.Genre}
{items.Actor}
{items.Director}
{items.Country}
);
// MovieApp Component
function MovieApp() {
return (
<div>
{movie_data.map(dataItem => (
<MovieComponent
key={dataItem.id}
id={dataItem.id}
items={dataItem}
/>
))}
</div>
);
}
// MovieComponent Component
function MovieComponent({ items }) {
return (
<div className="movie-container">
<img src={items.image} alt={items.name} />
<h2>{items.name}</h2>
<p>{items.description}</p>
<p>{items.Genre}</p>
<p>{items.Actor}</p>
<p>{items.Director}</p>
<p>{items.Country}</p>
</div>
);
}}