React · Lesson 3 of 7
Components & props
Splitting UI into components and passing data with props.
A component is a JavaScript function whose name starts with a capital letter and which returns JSX. Use components like custom tags: <JobCard />.
Props are the inputs to a component, passed like HTML attributes: <JobCard title="QA Engineer" lpa={4} />. Inside, read them from the function's parameter — usually by destructuring: function JobCard({ title, lpa }).
- Props are read-only: a component must never change its own props.
- Give defaults with destructuring:
{ city = "Remote" }. childrenis a special prop containing whatever you put between the opening and closing tags.
Try it yourself
Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.
Key points
- Component names start with a capital letter.
- Props pass data down and are read-only.
- children = content between the tags.
Quick check
Can a component change the props it receives?
Props belong to the parent; to change data over time a component uses state.
Practice task
Add a remote prop to JobCard and show a “Remote OK” badge only when it is true.
Interview corner
Props vs state?
Props are inputs from the parent and are read-only. State is data a component owns and can update, which triggers a re-render.
What is prop drilling and how can you avoid it?
Passing props through many layers that don't use them. Avoid it with composition (children), Context, or a state library.
Further reading
Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.
Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.