React - lesson 2 | HackIndia Skills

Key point

One idea

Props are data you pass from a parent component to a child component. They work like function arguments and let one component customize another component’s output.

Why props matter

Readable React apps are made from small components. A card, button, header, or project row can each be its own component.

But small components need data. Instead of hardcoding the same text in many places, pass the changing parts as props from the parent.

Example

Project card example

Imagine your HackIndia app shows student projects. The parent owns the project data. The child only knows how to display one project card.

function ProjectCard({ title, builder, stack }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>Built by {builder}</p>
      <p>Stack: {stack}</p>
    </article>
  );
}

export default function App() {
  return (
    <main>
      <h1>HackIndia Projects</h1>
      <ProjectCard
        title="Campus Canteen Queue"
        builder="Aarav"
        stack="React, Firebase"
      />
      <ProjectCard
        title="UPI Expense Splitter"
        builder="Meera"
        stack="React, Node.js"
      />
    </main>
  );
}

Your to-do

Read the flow

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.

Start at App, the parent component.
Find each ProjectCard used inside App.
Notice the props written like JSX attributes: title, builder, stack.
Open ProjectCard and see those props received in the function parameter.
Check that ProjectCard does not know where the data came from.

0 of 5 done

Tip

Destructure props

For small components, destructure props in the parameter: function ProjectCard({ title, builder }). This keeps the JSX short and readable.

If there are many props, pause. The component may be doing too much, or you may need to pass one object instead.

Common mistake

Do not nest components

Do not define ProjectCard inside App just because App uses it. Component functions should be defined at the top level, not inside another component function.

Nesting component definitions can make React recreate them in buggy ways. If a child needs data from a parent, pass props instead.

// Avoid this pattern
function App() {
  function ProjectCard({ title }) {
    return <h2>{title}</h2>;
  }

  return <ProjectCard title="Campus Canteen Queue" />;
}

Props are read-only

A child component should use props to render. It should not try to change them.

Later, when your app needs changing data, you will use state in the component that owns that data and pass the current value down through props.