React Props — Real-world use cases

(passing data from the parent to the child component)

Hey React Learners,

Here are 10 real-time examples of React props you might use in typical applications, with short explanations of why each is passed from the parent to the child component.

1. User Profile

Parent Component (UserProfile):

import React from 'react';
import UserInfo from './UserInfo';

const UserProfile = () => {
  const user = {
    name: 'John Doe',
    age: 30,
    email: 'john@example.com'
  };
  return (
    <div>
      <h1>User Profile</h1>
      <UserInfo user={user} />
    </div>
  );
};
export default UserProfile;

Child Component (UserInfo)

const UserInfo = ({ user }) => (
  <div>
    <h2>{user.name}</h2>
    <p>Age: {user.age}</p>
    <p>Email: {user.email}</p>
  </div>
);
export default UserInfo;

Explanation: The UserInfo component receives the user object as a prop from the UserProfile parent component. This allows UserInfo to display user details.

2. Product Listing

Parent Component (ProductList):

import React from 'react';
import ProductItem from './ProductItem';

const ProductList = () => {
  const products = [
    { id: 1, name: 'Laptop', price: 1000 },
    { id: 2, name: 'Phone', price: 500 },
  ];
  return (
    <div>
      {products.map(product => (
        <ProductItem key={product.id} product={product} />
      ))}
    </div>
  );
};
export default ProductList;

Child Component (ProductItem):

const ProductItem = ({ product }) => (
  <div>
    <h3>{product.name}</h3>
    <p>Price: ${product.price}</p>
  </div>
);
export default ProductItem;

Explanation: ProductList passes each product to ProductItem to display product details.

3. Navigation Menu

Parent Component (NavBar):

import React from 'react';
import NavItem from './NavItem';

const NavBar = () => {
  const menuItems = ['Home', 'About', 'Contact'];
  return (
    <nav>
      {menuItems.map((item, index) => (
        <NavItem key={index} item={item} />
      ))}
    </nav>
  );
};
export default NavBar;

Child Component (NavItem):

const NavItem = ({ item }) => (
  <a href={`#${item.toLowerCase()}`}>{item}</a>
);
export default NavItem;

Explanation: NavBar passes each item to NavItem to create individual navigation links.

4. Todo List

Parent Component (TodoList):

import React from 'react';
import TodoItem from './TodoItem';

const TodoList = () => {
  const todos = [
    { id: 1, text: 'Learn React', completed: false },
    { id: 2, text: 'Build a project', completed: true },
  ];
  return (
    <div>
      {todos.map(todo => (
        <TodoItem key={todo.id} todo={todo} />
      ))}
    </div>
  );
};
export default TodoList;

Child Component (TodoItem):

const TodoItem = ({ todo }) => (
  <div>
    <input type="checkbox" checked={todo.completed} readOnly />
    <span>{todo.text}</span>
  </div>
);
export default TodoItem;

Explanation: TodoList passes each todo to TodoItem to display individual todo items.

5. Blog Post

Parent Component (BlogPost):

import React from 'react';
import BlogContent from './BlogContent';

const BlogPost = () => {
  const post = {
    title: 'My First Blog Post',
    content: 'This is the content of the blog post.'
  };
  return (
    <div>
      <h1>{post.title}</h1>
      <BlogContent content={post.content} />
    </div>
  );
};
export default BlogPost;

Child Component (BlogContent):

const BlogContent = ({ content }) => (
  <p>{content}</p>
);
export default BlogContent;

Explanation: BlogPost passes the content of the blog post to BlogContent for display.

6. Weather Widget

Parent Component (WeatherWidget):

import React from 'react';
import WeatherDetails from './WeatherDetails';

const WeatherWidget = () => {
  const weather = {
    temperature: 72,
    condition: 'Sunny'
  };
  return (
    <div>
      <WeatherDetails weather={weather} />
    </div>
  );
};
export default WeatherWidget;

Child Component (WeatherDetails):

const WeatherDetails = ({ weather }) => (
  <div>
    <p>Temperature: {weather.temperature}°F</p>
    <p>Condition: {weather.condition}</p>
  </div>
);
export default WeatherDetails;

Explanation: WeatherWidget passes the weather object to WeatherDetails to display the current weather.

7. Chat App

Parent Component (ChatApp):

import React from 'react';
import MessageList from './MessageList';

const ChatApp = () => {
  const messages = [
    { id: 1, sender: 'Alice', text: 'Hi there!' },
    { id: 2, sender: 'Bob', text: 'Hello!' },
  ];
  return (
    <div>
      <MessageList messages={messages} />
    </div>
  );
};
export default ChatApp;

Child Component (MessageList):

const MessageList = ({ messages }) => (
  <ul>
    {messages.map(message => (
      <li key={message.id}>{message.sender}: {message.text}</li>
    ))}
  </ul>
);
export default MessageList;

Explanation: ChatApp passes the messages array to MessageList to display the chat messages.

8. Shopping Cart

Parent Component (Cart):

import React from 'react';
import CartItem from './CartItem';

const Cart = () => {
  const items = [
    { id: 1, name: 'Laptop', quantity: 1, price: 1000 },
    { id: 2, name: 'Phone', quantity: 2, price: 500 },
  ];
  return (
    <div>
      {items.map(item => (
        <CartItem key={item.id} item={item} />
      ))}
    </div>
  );
};
export default Cart;

Child Component (CartItem):

const CartItem = ({ item }) => (
  <div>
    <h3>{item.name}</h3>
    <p>Quantity: {item.quantity}</p>
    <p>Price: ${item.price}</p>
  </div>
);
export default CartItem;

Explanation: Cart passes each item to CartItem to display individual cart items.

9. Gallery

Parent Component (Gallery):

import React from 'react';
import ImageThumbnail from './ImageThumbnail';

const Gallery = () => {
  const images = [
    { id: 1, url: '/images/photo1.jpg', alt: 'Photo 1' },
    { id: 2, url: '/images/photo2.jpg', alt: 'Photo 2' },
  ];
  return (
    <div>
      {images.map(image => (
        <ImageThumbnail key={image.id} image={image} />
      ))}
    </div>
  );
};
export default Gallery;

Child Component (ImageThumbnail):

const ImageThumbnail = ({ image }) => (
  <img src={image.url} alt={image.alt} />
);
export default ImageThumbnail;

Explanation: Gallery passes each image to ImageThumbnail to display individual image thumbnails.

10. Notification System

Parent Component (NotificationSystem):

import React from 'react';
import Notification from './Notification';

const NotificationSystem = () => {
  const notifications = [
    { id: 1, message: 'You have a new message.' },
    { id: 2, message: 'Your order has been shipped.' },
  ];
  return (
    <div>
      {notifications.map(notification => (
        <Notification key={notification.id} message={notification.message} />
      ))}
    </div>
  );
};
export default NotificationSystem;

Child Component (Notification):

const Notification = ({ message }) => (
  <div>
    <p>{message}</p>
  </div>
);
export default Notification;

Explanation: NotificationSystem passes each message to Notification

Thats it for today and will meet sooner again!