🖥️ Passing data into components

In the previous step, we displayed a list of game titles on the page.

In this step, we will pass the game data into a component so that we can display the information in a more user-friendly way.

Understanding Props in React Components

React components can accept inputs called “props” (short for properties).

Props allow us to pass data from a parent component to a child component, making our components reusable with different data.

interface GreetingProps {
  name: string;
}
const Greeting = ({ name }: GreetingProps) => {
  return <div>Hello, {name}!</div>;
};

export default function App() {
  return (
    <div>
      <Greeting name="Alice" /> // Hello, Alice!
      <Greeting name="Bob" /> // Hello, Bob!
      <Greeting name="Charlie" /> // Hello, Charlie!
    </div>
  );
}

1: Create a GameCard Component file

Create a new directory in the app directory called components:

• Directoryapp

  • Directorycomponents/ < New folder

    • …

Inside your new components directory, create a new file called GameCard.tsx:

• Directoryapp

  • Directorycomponents

    • GameCard.tsx < New file

2: Define Props for the GameCard Component

First, we need to define what props our GameCard component will accept. We’ll create an interface to specify the expected props and their types.

app/components/GameCard.tsx

interface GameCardProps {
  title: string;
  releaseDate: string;
}

Note

TypeScript interfaces help us define the shape of objects. Here, we’re creating an interface called GameCardProps that specifies our component will receive two props: title and releaseDate, both of type string.

3: Update the GameCard Component to Use Props

Now that we’ve defined our props, we need to create a function called GameCard that takes the GameCardProps as an argument.

We need to export this function so that we can import it into other files.

Look carefully in the code to see if you can find where these props are used in the JSX being returned from the function.

app/components/GameCard.tsx

interface GameCardProps {
  title: string;
  releaseDate: string;
}
export default function GameCard({ title, releaseDate }: GameCardProps) {
  const formattedDate = releaseDate.substring(0, 10);

  return (
    <div className="flex flex-col gap-4">
      <div className="relative h-72 overflow-hidden">
        <img
          src="https://picsum.photos/400/300"
          alt="Game Cover"
          className="w-full object-cover rounded-md"
        />
      </div>
      <div className="flex justify-between">
        <div className="flex flex-col justify-between w-2/3">
          <h3 className="font-bold text-2xl text-slate-300">{title}</h3>
          <p className="text-cyan-300 uppercase text-sm font-semibold">Genre</p>
          <p className="text-slate-200/60 text-sm font-semibold">
            {formattedDate}
          </p>
        </div>
      </div>
    </div>
  );
}

Expression slots

We’re using curly braces {} to insert JavaScript expressions into our JSX. This allows us to display the dynamic values passed through props.

We’re also formatting the date by using substring(0, 10) to show only the first 10 characters of the date string (YYYY-MM-DD format).

4: Update the Index Route to Pass Props to GameCard

Finally, we need to update our index route to pass the game data to the GameCard component.

Open the app/routes/index.tsx file.

First, import the GameCard component at the top of the file:

app/routes/_index.tsx

import { PrismaClient } from "@prisma/client";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import type { MetaFunction } from "@remix-run/node";
import GameCard from "~/components/GameCard";

Next, replace the JSX being returned from the Index function with the following:

app/routes/_index.tsx

return (
   <div className="flex items-center justify-center min-h-screen">
     <div>
       <h1 className="text-4xl font-bold">Hello, World!</h1>
       <GameCard />
       {games.map((game) => (
         <div key={game.id}>
           <h2>{game.title}</h2>
         </div>
       ))}
     </div>
   <div className="container mx-auto px-8 grid grid-cols-3 gap-8">
     {games.map((game) => (
       <div key={game.id}>
         <GameCard
           key={game.id}
           title={game.title}
           releaseDate={game.releaseDate}
         />
       </div>
     ))}
   </div>
);

Note

We’re using the map() method to iterate over each game in our array and create a GameCard component for each one.

The key prop is a special React prop that helps React identify which items have changed, been added, or been removed. It should be a unique identifier, which is why we’re using game.id.

We’re also updating our layout to use a grid with 3 columns, which will display our game cards in a more visually appealing way.

What We’ve Learned

In this tutorial, we’ve:

1. Created a TypeScript interface to define the props for our GameCard component
2. Updated the GameCard component to use these props instead of hardcoded values
3. Modified our index route to pass game data to the GameCard component
4. Improved the layout of our page using CSS Grid

Now our application displays each game from the database in a visually appealing card format, making the information more user-friendly and organized.

Congratulations! You’ve successfully learned how to pass data from a parent component to a child component using props. This is a fundamental concept in React that allows you to create reusable components that can display different data based on the props they receive.

Click to reveal