Components & Props

Definition

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Props are arguments passed into React components.

Explain Like I'm New

Imagine building a house with Lego blocks. A Component is a single Lego block. You can use the exact same type of block in multiple places. 'Props' are like the color or size you specify for that specific block. So you have a 'Button Component', and you pass it a 'color' prop to make one button red and another blue.

Real World Example

A Navigation Bar is a component. Inside it, you might have multiple 'NavLinks'. Each NavLink is the same component, but receives different props like `href='/home'` and `label='Home'`.

Common Use Cases

•Breaking down complex UIs into small, manageable pieces
•Reusing the same UI elements (like buttons or cards) across an app
•Passing dynamic data from parent elements to children

Interactive Example

import React from 'react';

// A Reusable Child Component
const GreetingCard = (props) => {
  return (
    <div className="card">
      <h2>Hello, {props.name}!</h2>
      <p>Welcome to {props.city}.</p>
    </div>
  );
};

// The Parent Component
export default function App() {
  return (
    <div>
      {/* Reusing the component with different props */}
      <GreetingCard name="Alice" city="New York" />
      <GreetingCard name="Bob" city="London" />
    </div>
  );
}

Interview Questions

basic

What is a React Component?
What are Props in React?

intermediate

What is the difference between a Functional Component and a Class Component?
Can a child component modify its own props?

advanced

What are Pure Components?
What is 'prop drilling' and how can you avoid it?

trick

If you don't pass a value to a boolean prop (e.g., <Button disabled />), what is its default value?

Flash Cards

Question

Can a child component modify its own props?

Click to reveal answer

Answer

No. Props are strictly read-only (immutable) from the child's perspective. A component must never modify its own props. If data needs to change, it should be managed as 'state'.

Question

What is the difference between Functional and Class components?

Click to reveal answer

Answer

Functional components are simple JavaScript functions that return JSX. Class components are ES6 classes that extend `React.Component` and have a `render()` method. Before Hooks, only Class components could have state.

Question

If you don't pass a value to a boolean prop, what is its value?

Click to reveal answer

Answer

If you include a prop with no value (like `<Button disabled />`), it evaluates to `true` by default.