React Events — Complete Guide

React Events — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.

8 min read Updated 6/23/2026

On this page

React.js Tutorial · Lesson 14 of 100

Props

Beginner → Intermediate → Advanced → Professional

Beginner · 1 — Foundations · ~12 min read · Module 2: JavaScript & React Fundamentals

Introduction

This lesson is part of the beginner section. We explain Props slowly, with examples you can copy and run. If something is unclear, read it twice — that is how everyone learns. Props (properties) are inputs you pass to a component — like function arguments. They flow from parent to child and are read-only in the child. Props make components flexible. One ProductCard component can show any product by passing different props.

Props appears in almost every file you will write. Once it clicks, later lessons (hooks, routing, APIs) become much easier.

When will you use this?

You use this in every component you write from your first app to your tenth year on the job.

Product pages, login forms, and todo lists all use components, props, and state.
When a user types in a search box, React state holds the text and filters a list.

Real-world: Amazon seller SKU row

Amazon Seller Central lists thousands of SKUs. Parent InventoryTable passes sku, stock, and price as props to InventoryRow — the row never fetches; it only displays what it receives.

Production-style code

function InventoryRow({ sku, title, stock, price, onEdit }) {
  const lowStock = stock < 10;
  return (
    <tr className={lowStock ? 'row-warning' : ''}>
      <td>{sku}</td>
      <td>{title}</td>
      <td>{stock}</td>
      <td>₹{price.toLocaleString('en-IN')}</td>
      <td><button type="button" onClick={() => onEdit(sku)}>Edit</button></td>
    </tr>
  );
}

function InventoryTable({ items, onEditSku }) {
  return (
    <table>
      <tbody>
        {items.map(item => (
          <InventoryRow key={item.sku} {...item} onEdit={onEditSku} />
        ))}
      </tbody>
    </table>
  );
}

What happens in production: Props keep rows pure and testable — QA passes fake props to InventoryRow without mocking the whole inventory API.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

function ProductCard({ name, price }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>₹{price}</p>
    </div>
  );
}

<ProductCard name="Keyboard" price={2499} />

Line-by-line walkthrough

Code	What it means
`function ProductCard({ name, price }) {`	Defines a function — often a component or event handler.
`return (`	Sends UI or a value back to whoever called this function.
`<div>`	JSX tag — a UI element or custom component on the page.
`<h2>{name}</h2>`	JSX tag — a UI element or custom component on the page.
`<p>₹{price}</p>`	JSX tag — a UI element or custom component on the page.
`</div>`	Part of the Props example — read it together with the lines before and after.
`);`	Closes a block started by { or ( above.
`}`	Closes a block started by { or ( above.
`<ProductCard name="Keyboard" price={2499} />`	JSX tag — a UI element or custom component on the page.

How it works (big picture)

The parent passes name and price.
ProductCard cannot change props — if it needs to update data, use state in the parent and pass new props down.

Do this on your computer

Add a prop to a component and display it.
Pass a number with price={2499} not price="2499" unless you want a string.
Use default values: function Card({ title = "Untitled" }).
Read the real-world section and name which part of the app uses this topic.
Run the example locally and confirm the same behavior in the browser.
Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

Change text or labels in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Props = data from parent to child. Read-only in the child. Use destructuring in the parameter list.

Common questions

Props vs state?

Props come from outside; state is managed inside the component.

How long should I spend on Props?

Until you can explain it in your own words and run the example without looking at the answer. Beginners often need 30–60 minutes per new hook or routing topic; setup lessons may take one afternoon.

What if I get stuck on Props?

Re-read the line-by-line walkthrough, check the browser console for red errors, and compare your code character-by-character with the example. Search the exact error text — someone else had it too.

Where is Props used in real jobs?

See the real-world section above — the same pattern appears in LMS, banking, e-commerce, and SaaS products. Interviewers ask you to explain it using one concrete example from your project or this lesson.