Components and Props in React

Components and Props in React

In React, props (short for properties) are a way to pass data from a parent component to a child component. They make components reusable and dynamic.

Here’s a breakdown with an example:

🔹 Basic Example of Props

// Child Component
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Parent Component
export default function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

✅ Here:

  • Greeting is a child component.
  • name is a prop passed from App.
  • Each time we call <Greeting /> with a different name, it renders a unique message.

🔹 Destructuring Props (cleaner syntax)

function Greeting({ name, age }) {
  return (
    <h2>
      Hello {name}, you are {age} years old.
    </h2>
  );
}

export default function App() {
  return (
    <div>
      <Greeting name="Alice" age={25} />
      <Greeting name="Bob" age={30} />
    </div>
  );
}

🔹 Props Can Be Any Data Type

Props aren’t limited to strings — you can pass numbers, arrays, objects, and even functions.

function UserCard({ user, onClick }) {
  return (
    <div onClick={() => onClick(user.name)}>
      <h3>{user.name}</h3>
      <p>Age: {user.age}</p>
    </div>
  );
}

export default function App() {
  const user = { name: "Alice", age: 25 };

  const handleClick = (username) => {
    alert(`User clicked: ${username}`);
  };

  return (
    <UserCard user={user} onClick={handleClick} />
  );
}

✅ Here:

  • user (object) and onClick (function) are passed as props.
  • Clicking the UserCard calls the function from the parent.

In React, you can use default props (for fallback values) and PropTypes (for type checking).

🔹 Default Props

If a parent doesn’t provide a prop, you can give it a default value.

function Button({ label, color }) {
  return <button style={{ backgroundColor: color }}>{label}</button>;
}

// ✅ Set default values
Button.defaultProps = {
  label: "Click Me",
  color: "blue",
};

export default function App() {
  return (
    <div>
      <Button /> {/* Will use default label & color */}
      <Button label="Submit" color="green" />
    </div>
  );
}

➡️ Here, if you don’t pass label or color, React falls back to "Click Me" and "blue".

🔹 PropTypes (Type Checking)

PropTypes help catch bugs by validating props at runtime.

First, install PropTypes:

npm install prop-types

Example:

import PropTypes from "prop-types";

function Profile({ name, age, isStudent }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>{isStudent ? "Student" : "Not a student"}</p>
    </div>
  );
}

// ✅ Define prop types
Profile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  isStudent: PropTypes.bool,
};

// ✅ Default props
Profile.defaultProps = {
  isStudent: false,
};

export default function App() {
  return (
    <div>
      <Profile name="Alice" age={25} />
      <Profile name="Bob" age={30} isStudent={true} />
    </div>
  );
}

✅ Benefits:

  • If you forget to pass a required prop, React warns you in the console.
  • If you pass the wrong type (e.g., a string instead of a number), React also warns you.

👉 So props can be:

  1. Required or optional (via PropTypes).
  2. Type-checked (string, number, array, object, func, bool, etc.).
  3. Defaulted (via defaultProps).

Leave a Reply