React
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.
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.
0 of 8 lessons done · proved by a submitted project with a public repository
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>
);
}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.
0 of 5 done
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.
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" />;
}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.
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.
0 of 5 done
Answer the quick check to finish this lesson.