Build a Real Interactive To‑Do List with React

1. Find one repeated piece of content

Open the component where your app renders several similar items.

Before changing it, identify:

• What value is different for each item?
• Which values should eventually be stored together?
• Where does the repeated markup begin and end?

For example, a card might need a title, description, and category. Write down the fields your own component needs.

2. Try a variable in the browser

Open your browser’s developer console and try this:

let itemCount = ___;
itemCount

let itemCount = ___;
itemCount

Replace the blank with the number of items currently shown in your app.

Now change it:

itemCount = ___;
itemCount

itemCount = ___;
itemCount

The second expression should show the new number.

3. Identify your data types

In the console, create values based on your project:

const title = "___";
const isVisible = ___;
const quantity = ___;
const missingValue = null;

const title = "___";
const isVisible = ___;
const quantity = ___;
const missingValue = null;

Use:

• a string for title
• true or false for isVisible
• a number for quantity

Check each type:

typeof title
typeof isVisible
typeof quantity
typeof missingValue

typeof title
typeof isVisible
typeof quantity
typeof missingValue

You should see "string", "boolean", "number", and "object" for null.

4. Make one list from your project data

In the component file, add an array near the top of the component or module. Use objects so each item can hold several related values.

Adapt this shape to your own project:

const items = [
  {
    id: ___,
    title: "___",
    description: "___",
    category: "___",
  },
  {
    id: ___,
    title: "___",
    description: "___",
    category: "___",
  },
];

const items = [
  {
    id: ___,
    title: "___",
    description: "___",
    category: "___",
  },
  {
    id: ___,
    title: "___",
    description: "___",
    category: "___",
  },
];

Use a different id for each object. Keep the values relevant to your app instead of copying the example words.

Temporarily show that the array exists by adding a small expression somewhere in the component:

<p>Items: {items.length}</p>

<p>Items: {items.length}</p>

Your app should display the number of objects in the array. If it does not, check the spelling of items and whether the declaration is inside the component’s scope.

5. Read one value from the array

Add a temporary output for the first item:

<p>{items[0].title}</p>

<p>{items[0].title}</p>

The title of your first object should appear in the browser.

Change the expression to display a different property from your own object. Check that the browser shows the matching value.

6. Render every item with map

Replace the temporary output with a list generated from the array. Keep your existing card or item markup, but move the repeated portion inside map.

Use this as a scaffold; fill in your own variable names and JSX:

<div className="item-list">
  {items.map((item) => (
    <article key={item.___}>
      <h2>{item.___}</h2>
      <p>{item.___}</p>
    </article>
  ))}
</div>

<div className="item-list">
  {items.map((item) => (
    <article key={item.___}>
      <h2>{item.___}</h2>
      <p>{item.___}</p>
    </article>
  ))}
</div>

Check the browser:

• Every object should produce one visible item.
• Each item should show its own title and description.
• The console should not show a missing key warning.

If all cards show the same content, inspect whether you accidentally used one fixed value instead of item.property.

7. Create a filtered view

Now make a second array containing only items from one category. Place this before the JSX:

const featuredItems = items.filter(
  (item) => item.category === "___"
);

const featuredItems = items.filter(
  (item) => item.category === "___"
);

Replace the category with one that exists in your data.

Change the rendering expression from items.map to featuredItems.map, leaving the item markup in place.

Check that:

• Items with the chosen category remain visible.
• Items with other categories disappear.
• Changing the category string changes which items appear.

8. Derive a display label with map

Arrays can be transformed without changing the original array. Create a second transformed value for a small piece of UI:

const itemTitles = items.map((item) => item.___);

const itemTitles = items.map((item) => item.___);

Replace the blank with the property containing each item’s title.

Temporarily render the result:

<p>{itemTitles.join(" | ")}</p>

<p>{itemTitles.join(" | ")}</p>

The browser should show all titles on one line, separated by vertical bars.

9. Check that your original data stays intact

Add this temporary check:

<p>All items: {items.length}</p>
<p>Featured items: {featuredItems.length}</p>

<p>All items: {items.length}</p>
<p>Featured items: {featuredItems.length}</p>

The first count should stay equal to the number of objects you wrote. The second may be smaller because filter creates a new array.

Remove these temporary paragraphs after checking. Keep the useful filtered rendering if your project needs it.

For an empty-state message, use this structure and fill in your own JSX:

{featuredItems.length > 0 ? (
  featuredItems.map((item) => (
    // your item markup
  ))
) : (
  <p>___</p>
)}

{featuredItems.length > 0 ? (
  featuredItems.map((item) => (
    // your item markup
  ))
) : (
  <p>___</p>
)}

Test both cases by changing the category to one that exists and one that does not. The browser should show the list in the first case and your empty message in the second.

Before finishing, remove temporary debugging output and confirm:

• Your repeated content comes from an array.
• Each rendered item has a stable key.
• You used const for values you do not reassign.
• map and/or filter produces the visible behavior.
• The app still loads without console errors.