What Are React Props? 📦

Props (short for Properties) are how we pass data from one component to another in React. Think of them like passing a message:

// Parent component passing a message
function App() {
  return <WelcomeMessage text="Hello World!" />;
}

// Child component receiving the message
function WelcomeMessage({ text }) {
  return <h1>{text}</h1>;
}

How Props Work in Real Life 🌟

Let's look at a real example - a user profile card:

function UserProfile({ name, role, image, followers }) {
  return (
    <div className="profile-card">
      <img src={image} alt={name} />
      <h2>{name}</h2>
      <p>{role}</p>
      <span>Followers: {followers}</span>
    </div>
  );
}

// Using the component
<UserProfile 
  name="John Doe"
  role="Frontend Developer"
  image="/john.jpg"
  followers={1234}
/>

What is Props Drilling? 🕳️

Props drilling happens when we pass props through many components that don't need them, just to reach a component deep down that does need them.

Let's see a bad example:

// This is Props Drilling 😢
function App() {
  const user = "John";
  return <Header user={user} />;
}

function Header({ user }) {
  return <Navigation user={user} />;
}

function Navigation({ user }) {
  return <UserDropdown user={user} />;
}

function UserDropdown({ user }) {
  return <span>Welcome, {user}!</span>;
}

See how we passed user through Header and Navigation just to use it in UserDropdown? That's props drilling!

How to Fix Props Drilling 🛠️

1. Component Composition (Simple Fix)

   // Better way ✅
   function App() {
     const user = "John";
     return (
       <Header>
         <UserDropdown user={user} />
       </Header>
     );
   }
   
   function Header({ children }) {
     return (
       <nav>
         {children}
       </nav>
     );
   }
   
   function UserDropdown({ user }) {
     return <span>Welcome, {user}!</span>;
   }

2. Context API

   When you need to share data with many components:

   // Create a context
   const UserContext = React.createContext();
   
   // Provider at the top
   function App() {
     const user = "John";
     return (
       <UserContext.Provider value={user}>
         <Header />
       </UserContext.Provider>
     );
   }
   
   // Use it anywhere deep down
   function UserDropdown() {
     const user = React.useContext(UserContext);
     return <span>Welcome, {user}!</span>;
   }

Common Props Patterns You'll Use 💡

1. Passing Multiple Props

   function Button({ text, color, size, onClick }) {
     return (
       <button 
         style={{ backgroundColor: color, fontSize: size }}
         onClick={onClick}
       >
         {text}
       </button>
     );
   }

2. Props with Default Values

   function Card({ title, theme = "light" }) {
     return (
       <div className={`card ${theme}`}>
         <h2>{title}</h2>
       </div>
     );
   }

3. Passing Children Props

   function Container({ children }) {
     return (
       <div className="container">
         {children}
       </div>
     );
   }
   
   // Use it like this
   <Container>
     <h1>Welcome!</h1>
     <p>This is my content.</p>
   </Container>

Props Best Practices 🎯

1. Keep Props Simple

   // Good ✅
   <UserCard name="John" age={25} />
   
   // Too complex ❌
   <UserCard userMetadata={{ personal: { identity: { name: "John" }}}} />

2. Use Destructuring

   // Good ✅
   function Button({ text, onClick }) {
     return <button onClick={onClick}>{text}</button>;
   }
   
   // Not as clean ❌
   function Button(props) {
     return <button onClick={props.onClick}>{props.text}</button>;
   }

3. Document Your Props

   function UserCard({ 
     name,        // User's display name
     role,        // Job title or role
     isOnline,    // Online status
     lastActive   // Last active timestamp
   }) {
     // Component code
   }

Real-World Example: Social Media Post 📱

Here's how props work in a real feature:

function Post({ author, content, likes, comments }) {
  return (
    <div className="post">
      <PostHeader author={author} />
      <PostContent content={content} />
      <PostActions likes={likes} />
      <Comments comments={comments} />
    </div>
  );
}

function PostHeader({ author }) {
  return (
    <div className="header">
      <img src={author.avatar} alt={author.name} />
      <h3>{author.name}</h3>
    </div>
  );
}

// Use it like this
<Post 
  author={{
    name: "Sarah",
    avatar: "/sarah.jpg"
  }}
  content="Learning React is fun!"
  likes={42}
  comments={[...]}
/>

Remember! 🧠

• Props are for passing data between components

• Avoid props drilling when possible

• Use composition or Context for deep data passing

• Keep props simple and documented

• Props are read-only - never modify them!

Level up your React skills with DevAwait! 🚀