Props in React: Passing Data Between Components

 In React, components are the building blocks of user interfaces. But how do components talk to each other or share data? The answer lies in props. Short for “properties,” props are a core concept in React used to pass data from one component to another, usually from parent to child.

What Are Props?

Props are read-only objects that allow you to send data into a component. They work similarly to arguments passed to a function. A parent component can pass any type of data to a child component using props — including strings, numbers, arrays, objects, functions, or even other components.

Here’s a basic example:

function Greeting(props) {

  return <h1>Hello, {props.name}!</h1>;

}

function App() {

  return <Greeting name="Alice" />;

}

In this case, the App component passes the name prop to the Greeting component, which renders: “Hello, Alice!”

Props Are Read-Only

One of the fundamental rules in React is that props cannot be changed by the receiving component. They are immutable. If you need to change data inside a component, use state instead.

Attempting to modify props will result in warnings and bad application design.

Using Destructuring

To make the code cleaner and more readable, you can destructure props:

function Greeting({ name }) {

  return <h1>Hello, {name}!</h1>;

}

This way, you can access props directly without writing props.name.

Passing Functions via Props

You can also pass functions as props, which allows child components to communicate back to the parent. This is essential for handling user events or updating shared state.

function Button({ onClick }) {

  return <button onClick={onClick}>Click Me</button>;

}

function App() {

  const handleClick = () => alert("Button clicked!");

  return <Button onClick={handleClick} />;

}

Final Thoughts

Props in React enable flexible and dynamic component structures. They are essential for component reuse, data flow, and parent-child communication. Mastering props helps build scalable, modular UIs where components can easily be composed and managed. While props send data down the tree, advanced patterns like Context API or Redux help manage more complex state and communication across the app.

Learn  MERN Stack Training Course

Building a Mini JavaScript Project: Calculator or Weather App

Introduction to React and Single Page Applications (SPAs)

Setting Up a React Project with Create React App or Vite

Functional Components vs Class Components

Visit Our Quality Thought Training Institute 










Comments

Post a Comment

Popular posts from this blog

Understanding the useEffect Hook

 React is primarily used for building user interfaces, where components re-render based on changes in state or props. But real-world applications often need to interact with external systems—fetching data, subscribing to events, updating the DOM, or starting timers. These are known as side effects, and React’s useEffect hook is the tool designed to handle them in functional components. What is useEffect? The useEffect hook lets you perform side effects in your component. It's React’s way of combining several lifecycle methods from class components (like componentDidMount, componentDidUpdate, and componentWillUnmount) into a single, unified API. Syntax : useEffect(() => {   // side effect code   return () => {     // cleanup code (optional)   }; }, [dependencies]); The first argument is a function containing your side effect logic. The optional second argument is a dependency array that controls when the effect runs. jsx Basic Example import React, { u...
Read more

What Is Tosca? A Beginner’s Guide

 In today’s fast-paced digital world, software testing has become more critical than ever. Businesses rely on flawless applications to maintain a competitive edge, and automation is the key to ensuring quality at speed. One powerful tool that has gained significant popularity in the test automation world is Tosca. Whether you're a tester, developer, or just curious about automation, this guide will help you understand what Tosca is and why it's important. What Is Tosca? Tosca is a test automation tool developed by Tricentis, designed to automate end-to-end testing for a wide range of applications. It supports web, mobile, desktop, API, and enterprise applications like SAP and Salesforce. Tosca is widely known for its model-based testing approach, which simplifies the automation process and reduces maintenance efforts. Unlike traditional scripting tools, Tosca doesn’t require deep coding knowledge, making it suitable for both technical and non-technical testers. Key Features of ...
Read more

Exception Handling in Java

In Java, exception handling is a powerful mechanism that helps developers manage runtime errors, ensuring the smooth execution of programs. Rather than crashing the program, exceptions allow you to identify the error, handle it gracefully, and keep the application running. What Is an Exception? An exception is an unwanted or unexpected event that disrupts the normal flow of a program. These can be caused by user errors, logic errors, or system issues. Java categorizes exceptions mainly into two types: Checked Exceptions – Handled during compile-time (e.g., IOException, SQLException). Unchecked Exceptions – Occur during runtime (e.g., NullPointerException, ArithmeticException). Why Handle Exceptions? Without exception handling, an error can cause your program to terminate unexpectedly. Handling exceptions: Increases program reliability Helps in debugging and troubleshooting Improves user experience by displaying meaningful error messages Basic Exception Handling Syntax Java provides fiv...
Read more