Passing Event Handlers and Working with useState in React + TypeScript

Hey everyone! 👋 Welcome to my 5th blog post in this series on learning React with TypeScript. If you've been following along, we’ve already covered how to:

• Create a basic “Hello World” app

• Build and use React components

• Pass props to React components in TypeScript

• Pass Boolean, String, Number, and JSON Objects to React Components

In this post, we’ll take a step further and learn how to pass event handlers and work with `useState` using a real-world example.

💡 Instead of the usual `setCount` examples you’ll see all over the internet, we’re building something practical for actual projects: a User List component.

🔍 What is the `useState` Hook?

`useState` is a React Hook that allows you to manage state in functional components. It's one of the most commonly used hooks in React, introduced in version 16.8.

Why use `useState`?
It gives you the ability to store and update component-level data like form inputs, toggle states, user lists, and more — without needing class components.

Example:
const [value, setValue] = useState(initialValue);

📦 What We Will Build

- A UserList component under the User folder
- Use useState to store a list of users
- On button click, we’ll add a dummy user
- Display the user list in a clean HTML table

🛠️ Step-by-Step Code Walkthrough

1. Import Hook
import { FC, useState } from "react";

2. Define the User Type
export type User = {
    id: number,
    name: string,
    emailAddress: string,
    moobileNumber: string
};

3. Create Component and State
const UserList: FC = () => {
  const [users, setUsers] = useState<User[]>([]);

4. Add Dummy User Function
  const addUser = () => {
    const newUser: User = {
      id: users.length + 1,
      name: `User ${users.length + 1}`,
      emailAddress: `user${users.length + 1}@theravinder.com`,
      moobileNumber: `+44-779945881${users.length}`
    };
    setUsers([...users, newUser]);
  }

5. Render UI with Button and Table
return (
  <>
    <div><h1>User List</h1></div>
    <div><button onClick={addUser}>Add</button></div>
    {users.length > 0 ? (
      <table>...</table>
    ) : (
      <p>No users added yet.</p>
    )}
  </>
);

✅ Summary

- You learned how to use useState in a practical way
- Passed an event handler to a button
- Managed and displayed a list dynamically using JSX
- Rendered everything inside a simple HTML table

🔜 Coming Next

In the next blog, we’ll explore how to delete users and talk about the importance of using the key prop when rendering lists.

Download full working code from GitHub https://github.com/ravinder25886/basic-component/tree/feature/useState-event-handling