React - lesson 4 | HackIndia Skills

Key point

One idea

When you render a list, React needs a key for each item. Use a stable string or number from the data, like an id, so React can track items when the list changes.

A key only needs to be unique among its siblings. It does not need to be globally unique across your whole app.

Why keys matter

React renders lists with normal JavaScript. Most of the time, you will use array.map() to turn data into JSX.

If you add, remove, or reorder items, React uses keys to understand what changed. Without good keys, React may reuse the wrong row and show confusing UI, especially when each row later has inputs or local state.

Example

Project list example

Keep the data as an array. Then map over it in JSX. Put the key on the outer element returned by map().

This example fits an internship-style portfolio app. You can replace the sample projects with your own hackathon projects.

const projects = [
  {
    id: "upi-splitter",
    name: "UPI Splitter",
    stack: "React, CSS",
    status: "Submitted"
  },
  {
    id: "mess-menu",
    name: "Mess Menu Tracker",
    stack: "React, Firebase",
    status: "In progress"
  },
  {
    id: "bus-pass",
    name: "Bus Pass Reminder",
    stack: "React, Local Storage",
    status: "Planned"
  }
];

function ProjectList() {
  return (
    <section>
      <h2>Projects</h2>

      <ul>
        {projects.map((project) => (
          <li key={project.id}>
            <h3>{project.name}</h3>
            <p>{project.stack}</p>
            <p>Status: {project.status}</p>
          </li>
        ))}
      </ul>
    </section>
  );
}

export default ProjectList;

Your to-do

Build the list

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Create an array of objects above your component or in a separate data file.
Give each object a stable id that will not change when the text changes.
Use map() inside JSX to return one UI block per item.
Add key={item.id} on the outer element returned by map().
Keep the row display in a small child component if the JSX grows.

0 of 5 done

Common mistake

Avoid index keys

Do not use the array index as the key for a list that can change order, add items, or delete items. The index is the item’s position, not the item’s identity.

It may look fine in a static demo. Later, when you add filtering, sorting, forms, or delete buttons, index keys can make React preserve the wrong item state.

// Avoid this for changing lists
{projects.map((project, index) => (
  <li key={index}>{project.name}</li>
))}

// Prefer this
{projects.map((project) => (
  <li key={project.id}>{project.name}</li>
))}

Tip

Ask AI carefully

You can ask ChatGPT, Gemini, or Claude to turn your project data into a React list. But check the keys yourself.

If the AI gives key={index}, ask it to add stable ids to the data and use key={project.id}. Also check that it did not define a component inside another component just to render the row.