i am trying to write a react code but app .jsx doesn't display anything except the (♥) no matter what i do

here is the first file.......... moviecard.jsx

  import React from "react"
function Moviecard (Movie) {
   function onFavouriteClick () {
    alert("clicked")
   }
return (
    <div className="movie-card">

        <div className="movie-poster">
        <img src={Movie.url} alt={Movie.title} />

            <div className="movie-overlay">
        <button className="favourite-btn" onClick={onFavouriteClick} >
        ♥
        </button>
             </div>

        </div>
        <div className="movie-info">
            <h3>{Movie.title}</h3>
            <p>{Movie.release_date}</p>
        </div>
    </div>
)
}

export default Moviecard

second file........... home.jsx .......................................

    import React from "react";
import Moviecard from "../components/Moviecard";
function Home() {
 const movies = [
        {id: 1, title: "john wick", release_date:"2020"},
        
        {id: 2, title: "john wick 2", release_date:"2021"},
        
        {id: 3, title: "john wick 3", release_date:"2022"},
        
        {id: 4, title: "john wick 4", release_date:"2023"},
    ]
 return (
    <div className="home">
        <div className="movies-grid">
            {movies.map((Movie) => ( 
            <Moviecard key={Movie.id}/>
            ))}
        </div>
    </div>
    )
}

export default Home;

third file........ app.jsx .....................................

    import React from "react";
import './App.css';
import Home from "./pages/home";
function App() {
  return (
  <>
  <Home/>
  </>
  )
};
export default App;

........

i am trying to write a react code but app .jsx doesn't display anything except the (♥) no matter what i do

here is the first file.......... moviecard.jsx

  import React from "react"
function Moviecard (Movie) {
   function onFavouriteClick () {
    alert("clicked")
   }
return (
    <div className="movie-card">

        <div className="movie-poster">
        <img src={Movie.url} alt={Movie.title} />

            <div className="movie-overlay">
        <button className="favourite-btn" onClick={onFavouriteClick} >
        ♥
        </button>
             </div>

        </div>
        <div className="movie-info">
            <h3>{Movie.title}</h3>
            <p>{Movie.release_date}</p>
        </div>
    </div>
)
}

export default Moviecard

second file........... home.jsx .......................................

    import React from "react";
import Moviecard from "../components/Moviecard";
function Home() {
 const movies = [
        {id: 1, title: "john wick", release_date:"2020"},
        
        {id: 2, title: "john wick 2", release_date:"2021"},
        
        {id: 3, title: "john wick 3", release_date:"2022"},
        
        {id: 4, title: "john wick 4", release_date:"2023"},
    ]
 return (
    <div className="home">
        <div className="movies-grid">
            {movies.map((Movie) => ( 
            <Moviecard key={Movie.id}/>
            ))}
        </div>
    </div>
    )
}

export default Home;

third file........ app.jsx .....................................

    import React from "react";
import './App.css';
import Home from "./pages/home";
function App() {
  return (
  <>
  <Home/>
  </>
  )
};
export default App;

........

• javascript
• reactjs

• 4 You ony passed the key to MovieCard component not url and title – modos Commented Mar 30 at 20:40

1 Answer 1

Try with below

import React from "react";

function Moviecard({ title, release_date, url }) {
  function onFavouriteClick() {
    alert("clicked");
  }

  return (
    <div className="movie-card">
      <div className="movie-poster">
        <img src={url} alt={title} />
        <div className="movie-overlay">
          <button className="favourite-btn" onClick={onFavouriteClick}>
            ♥
          </button>
        </div>
      </div>
      <div className="movie-info">
        <h3>{title}</h3>
        <p>{release_date}</p>
      </div>
    </div>
  );
}

export default Moviecard;

==================================== And in Home.jsx, pass the props correctly: Modify this part inside the .map() function:

{movies.map((movie) => ( 
  <Moviecard key={movie.id} {...movie} />
))}

If your movies don’t have an url property yet, make sure to add it to the movies array in Home.jsx, for example:

const movies = [
  { id: 1, title: "John Wick", release_date: "2020", url: "image1.jpg" },
  { id: 2, title: "John Wick 2", release_date: "2021", url: "image2.jpg" },
  { id: 3, title: "John Wick 3", release_date: "2022", url: "image3.jpg" },
  { id: 4, title: "John Wick 4", release_date: "2023", url: "image4.jpg" }
];