Building a Pokémon Data Table with React Components and HTML

If you’ve been following along on AutistiCoder, you know we’re building a Pokémon app from scratch. Today’s post is all about using React components and HTML elements to create a data table for our Pokémon data. This is a foundational step for creating organized, interactive web applications.

Let’s dive into how tables work in HTML, what React components are, and how to combine them to display Pokémon data effectively.

Step 1: Understanding HTML Elements and Tables

HTML elements are the building blocks of every webpage. Here’s a quick refresher on some basic tags we’ll be using:

• <table> sets up the main table structure.
• <tr> defines a row.
• <td> represents a cell within a row.
• <thead> is used for table headers, while <tbody> is for main content.

We’ll use these tags to build a Pokémon data table and organize our app visually.

Step 2: What is a React Component?

A React component is like a reusable function that helps build and manage parts of our app’s interface. Components allow us to:

• Keep our code modular and organized.
• Pass in data using props to make each component adaptable.

In this tutorial, we’ll create a PokemonTable component to handle Pokémon data.

Step 3: Creating the PokemonTable Component

Our goal is to display Pokémon data like Name and Base HP. Here’s how:

1. Define the Component: We start by setting up the PokemonTable component.
2. Pass Data Using Props: We’ll pass a pokemonData array as a prop.
3. Map Data to Rows: Use .map() to render each Pokémon’s name and HP.

const PokemonTable = ({ pokemonData }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Base HP</th>
        </tr>
      </thead>
      <tbody>
        {pokemonData.map((pokemon) => (
          <tr key={pokemon.name}>
            <td>{pokemon.name}</td>
            <td>{pokemon.baseHP}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

In this setup:

• Props: We use pokemonData as a prop to bring in Pokémon data.
• Dynamic Rows: .map() generates rows for each Pokémon, making the table easy to expand or update.

Step 4: Using the PokemonTable Component

Now, let’s integrate the PokemonTable component in our main app:

const Home = () => {
  const pokemonData = [
    { name: "Pikachu", baseHP: 35 },
    { name: "Charmander", baseHP: 39 },
    { name: "Bulbasaur", baseHP: 45 }
  ];

  return (
    <div>
      <h1>Pokémon Data App</h1>
      <PokemonTable pokemonData={pokemonData} />
    </div>
  );
};

With Home, we’re able to display the PokemonTable component and pass sample data, giving us a fully functional Pokémon data table.

What’s Next?

Awesome job! Now that you’ve built a Pokémon data table using React and HTML, we’re ready for the next challenge. In our next tutorial, we’ll use JavaScript Promises and the fetch function to pull data from PokeAPI, bringing real Pokémon data into our app.

Stay tuned for more as we turn our Pokémon data table into a fully interactive, data-driven component!

Creating a structured data table in React is a key skill for building dynamic applications. If you’d like to see the full tutorial, check out the video on our AutistiCoder YouTube channel and follow along as we keep expanding our Pokémon app!