What are props in React, and how are they used?

Props (short for “properties”) are a way of passing data from parent components to child components in React. They are read-only and help make your components reusable by allowing them to receive different data inputs.

Think of props like function parameters - they allow you to pass values into your component that can influence what gets rendered to the DOM.

How Props Work

Props flow in a one-way direction from parent to child, creating a unidirectional data flow that makes applications more predictable and easier to understand.

Basic Props Usage

// Parent component passing props
function App() {
  return (
    <div>
      <Greeting name="Rahul" />
      <Greeting name="Priya" />
    </div>
  );
}

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

// Using destructuring for cleaner code
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Types of Props

1. Simple Data Types

You can pass strings, numbers, booleans, etc. as props.

<UserProfile
  name="Rahul Sharma"
  age={28}
  isAdmin={true}
  joinDate="2023-01-15"
/>

2. Objects and Arrays

You can pass complex data structures like objects and arrays.

const user = {
  id: 101,
  name: "Priya Patel",
  email: "priya@example.com",
  skills: ["React", "Node.js", "MongoDB"]
};

<UserCard user={user} />

// In the child component
function UserCard({ user }) {
  return (
    <div className="user-card">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <div className="skills">
        {user.skills.map(skill => (
          <span key={skill} className="skill-tag">{skill}</span>
        ))}
      </div>
    </div>
  );
}

3. Functions as Props

You can pass functions as props, allowing child components to communicate with their parents.

function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const handleIncrement = () => {
    setCount(count + 1);
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onIncrement={handleIncrement} />
    </div>
  );
}

function ChildComponent({ onIncrement }) {
  return (
    <button onClick={onIncrement}>
      Increment Count
    </button>
  );
}

4. React Elements as Props

You can pass JSX elements as props, which is useful for creating layout components.

function Page() {
  return (
    <Layout
      header={<Header />}
      sidebar={<Sidebar />}
      content={<MainContent />}
      footer={<Footer />}
    />
  );
}

function Layout({ header, sidebar, content, footer }) {
  return (
    <div className="page-layout">
      <div className="header">{header}</div>
      <div className="main">
        <div className="sidebar">{sidebar}</div>
        <div className="content">{content}</div>
      </div>
      <div className="footer">{footer}</div>
    </div>
  );
}

5. Children Prop

The special children prop contains the content between the opening and closing tags of a component.

function Card({ title, children }) {
  return (
    <div className="card">
      <div className="card-header">
        <h2>{title}</h2>
      </div>
      <div className="card-body">
        {children}
      </div>
    </div>
  );
}

// Usage
function App() {
  return (
    <Card title="Welcome">
      <p>This is the card content.</p>
      <button>Click me</button>
    </Card>
  );
}

Default Props

You can specify default values for props in case they’re not provided by the parent component.

function Button({ text, color, size }) {
  return (
    <button className={`btn btn-${color} btn-${size}`}>
      {text}
    </button>
  );
}

// Setting default props
Button.defaultProps = {
  text: 'Click me',
  color: 'primary',
  size: 'medium'
};

// In functional components, you can also use default parameters
function Button({ text = 'Click me', color = 'primary', size = 'medium' }) {
  return (
    <button className={`btn btn-${color} btn-${size}`}>
      {text}
    </button>
  );
}

Props Validation with PropTypes

For type checking props, you can use the prop-types library.

import PropTypes from 'prop-types';

function UserProfile({ name, age, email, isActive }) {
  return (
    <div className="profile">
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Email: {email}</p>
      <p>Status: {isActive ? 'Active' : 'Inactive'}</p>
    </div>
  );
}

UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  email: PropTypes.string.isRequired,
  isActive: PropTypes.bool
};

UserProfile.defaultProps = {
  age: 25,
  isActive: true
};

Props in Class Components

In class components, props are accessed through this.props.

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Props vs State

It’s important to understand the difference between props and state:

Props are passed from parent to child and are immutable within the component
State is managed within the component and can be changed by the component itself

// Using both props and state
function Counter({ initialCount, onCountChange }) {
  // State - internal, mutable
  const [count, setCount] = useState(initialCount);
  
  const handleIncrement = () => {
    const newCount = count + 1;
    setCount(newCount);
    onCountChange(newCount); // Notify parent via props
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
    </div>
  );
}

Advanced Props Techniques

1. Props Spreading

You can spread an object as props to pass multiple properties at once.

function App() {
  const userProps = {
    name: "Rahul",
    age: 28,
    location: "Mumbai"
  };
  
  return <UserInfo {...userProps} />;
}

2. Render Props

A technique where a component receives a function prop that returns a React element.

function MouseTracker() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const handleMouseMove = (event) => {
      setPosition({
        x: event.clientX,
        y: event.clientY
      });
    };
    
    window.addEventListener('mousemove', handleMouseMove);
    
    return () => {
      window.removeEventListener('mousemove', handleMouseMove);
    };
  }, []);
  
  return (
    <div>
      <h1>Mouse Tracker</h1>
      {/* The render prop */}
      {props.render(position)}
    </div>
  );
}

// Usage
function App() {
  return (
    <MouseTracker 
      render={({ x, y }) => (
        <div>
          <p>Current mouse position:</p>
          <p>X: {x}, Y: {y}</p>
        </div>
      )}
    />
  );
}

3. Higher-Order Components (HOCs)

Functions that take a component and return a new component with additional props.

// HOC that adds user data to any component
function withUser(WrappedComponent) {
  return function WithUser(props) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
      // Fetch user data
      fetchCurrentUser()
        .then(data => {
          setUser(data);
          setLoading(false);
        })
        .catch(error => {
          console.error("Error fetching user:", error);
          setLoading(false);
        });
    }, []);
    
    if (loading) return <div>Loading user data...</div>;
    if (!user) return <div>User not found</div>;
    
    // Pass the user as a prop, along with all other props
    return <WrappedComponent user={user} {...props} />;
  };
}

// Usage
function UserDashboard({ user, ...props }) {
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      {/* Rest of dashboard */}
    </div>
  );
}

const UserDashboardWithUser = withUser(UserDashboard);

// In App component
function App() {
  return <UserDashboardWithUser theme="dark" />;
}

Real-World Example

In a recent e-commerce project, I used props extensively to create a flexible product catalog:

// ProductCatalog.jsx
function ProductCatalog() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filters, setFilters] = useState({
    category: 'all',
    sortBy: 'popularity'
  });
  
  useEffect(() => {
    // Fetch products based on filters
    fetchProducts(filters)
      .then(data => {
        setProducts(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Error fetching products:', error);
        setLoading(false);
      });
  }, [filters]);
  
  const handleFilterChange = (newFilters) => {
    setFilters({ ...filters, ...newFilters });
  };
  
  const handleAddToCart = (productId) => {
    // Add to cart logic
    console.log(`Adding product ${productId} to cart`);
  };
  
  if (loading) return <LoadingSpinner />;
  
  return (
    <div className="product-catalog">
      <FilterBar 
        filters={filters} 
        onFilterChange={handleFilterChange} 
      />
      
      <ProductGrid 
        products={products}
        onAddToCart={handleAddToCart}
        layout="grid"
        showRatings={true}
      />
    </div>
  );
}

// FilterBar.jsx
function FilterBar({ filters, onFilterChange }) {
  const categories = ['all', 'electronics', 'clothing', 'books', 'home'];
  const sortOptions = [
    { value: 'popularity', label: 'Most Popular' },
    { value: 'price-asc', label: 'Price: Low to High' },
    { value: 'price-desc', label: 'Price: High to Low' },
    { value: 'rating', label: 'Customer Rating' }
  ];
  
  return (
    <div className="filter-bar">
      <div className="category-filter">
        <h3>Categories</h3>
        <div className="category-buttons">
          {categories.map(category => (
            <button
              key={category}
              className={filters.category === category ? 'active' : ''}
              onClick={() => onFilterChange({ category })}
            >
              {category.charAt(0).toUpperCase() + category.slice(1)}
            </button>
          ))}
        </div>
      </div>
      
      <div className="sort-filter">
        <h3>Sort By</h3>
        <select 
          value={filters.sortBy}
          onChange={(e) => onFilterChange({ sortBy: e.target.value })}
        >
          {sortOptions.map(option => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

// ProductGrid.jsx
function ProductGrid({ products, onAddToCart, layout, showRatings }) {
  return (
    <div className={`product-grid layout-${layout}`}>
      {products.length === 0 ? (
        <p className="no-products">No products found matching your criteria</p>
      ) : (
        products.map(product => (
          <ProductCard 
            key={product.id}
            product={product}
            onAddToCart={onAddToCart}
            showRatings={showRatings}
          />
        ))
      )}
    </div>
  );
}

// ProductCard.jsx
function ProductCard({ product, onAddToCart, showRatings }) {
  const { id, name, price, image, rating, inStock } = product;
  
  return (
    <div className="product-card">
      <div className="product-image">
        <img src={image} alt={name} />
        {!inStock && <span className="out-of-stock">Out of Stock</span>}
      </div>
      
      <div className="product-info">
        <h3 className="product-name">{name}</h3>
        
        {showRatings && (
          <div className="product-rating">
            <StarRating value={rating} />
            <span>({rating.toFixed(1)})</span>
          </div>
        )}
        
        <p className="product-price">₹{price.toLocaleString()}</p>
        
        <button 
          className="add-to-cart-button"
          disabled={!inStock}
          onClick={() => onAddToCart(id)}
        >
          {inStock ? 'Add to Cart' : 'Out of Stock'}
        </button>
      </div>
    </div>
  );
}

// StarRating.jsx
function StarRating({ value, max = 5 }) {
  return (
    <div className="star-rating">
      {[...Array(max)].map((_, index) => {
        const starValue = index + 1;
        return (
          <span 
            key={index}
            className={`star ${starValue <= value ? 'filled' : 
                           starValue - 0.5 <= value ? 'half-filled' : 'empty'}`}
          >
            ★
          </span>
        );
      })}
    </div>
  );
}

This example demonstrates:

Props for Configuration: The ProductGrid and ProductCard components accept props like layout and showRatings to configure their appearance
Props for Data: Product data is passed down through the component tree
Function Props for Communication: The onAddToCart and onFilterChange functions allow child components to communicate with parents
Props Destructuring: Components use destructuring for cleaner code
Conditional Rendering with Props: The showRatings prop controls whether ratings are displayed

Best Practices for Props

Keep Props Simple: Pass only what the child component needs
Use Descriptive Names: Make prop names clear and self-explanatory
Validate Props: Use PropTypes or TypeScript to validate props
Provide Default Values: Use defaultProps or default parameters
Avoid Modifying Props: Treat props as immutable within the component
Use Destructuring: For cleaner, more readable code
Document Props: Add comments or documentation for complex props

Interview Tips

Explain props as a way to make components reusable and configurable
Emphasize the unidirectional data flow (parent to child) for predictability
Be ready to discuss the difference between props and state
Demonstrate knowledge of prop validation with PropTypes or TypeScript
Share a specific example of how you’ve used props to create flexible, reusable components
Mention advanced patterns like render props or HOCs if relevant to the position

Test Your Knowledge

Take a quick quiz to test your understanding of this topic.

Search

Search Coming Soon