React - Props and State - Learnwebsitebuilding

React - Props and State

When you build a React application, everything revolves around data. Data determines how your app looks, what it displays, and how it behaves. React provides two main ways to handle and pass data within your app — props and state.

Understanding the difference between props and state, and how data flows through your React components, is one of the most important concepts you’ll need to master as a React developer.

1. What Is Data in React?

In React, data is any piece of information your application needs to display or process. For example:

* A user’s name or email address

* A list of products or posts

* A toggle for light or dark mode

* A number that increases every time you click a button

React components use this data to render the UI and update it when something changes.

Now, React provides two key ways to manage and share this data:

Props — data that is passed down from a parent component to a child component.

State — data that is managed within a specific component and can change over time.

2. What Are Props?

Props (short for properties) are how React components receive data from their parent components. They are like arguments you pass into a function.

Props allow you to make your components dynamic and reusable. Instead of hardcoding values, you can pass data into components so that they display different content depending on the input.

Here’s a simple example:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
function App() {
  return (
    <div>
      <Greeting name=“Alice” />
      <Greeting name=“Bob” />
    </div>
  );
}
export default App;

How this works

The ‘App’ component passes the prop ‘name’ with different values (`”Alice”` and `”Bob”`) to the ‘Greeting‘ component.
Inside Greeting, we access the prop using props.name.
The result:

Hello, Alice!

Hello, Bob!

Props make it possible to use the same component multiple times with different data.

Key characteristics of props

Props are read-only — a component cannot change its own props.
Props are passed from parent to child — the data flow is one-way.
Props make components reusable and flexible.

Passing Different Types of Props

Props can handle any kind of data — strings, numbers, arrays, objects, or even functions.

a) Strings and Numbers**

function Profile(props) {
  return <p>{props.name} is {props.age} years old.</p>;
}

function App() {
  return (
    <Profile name=“Aman” age={22} />  );
}


export default App

b) Objects

const user = { name: “Riya”, city: “Delhi” };

function App() {
  return <p>{user.name} lives in {user.city}.</p>;
}

export default App;

c) Functions

Passing a function as a prop allows child components to trigger actions in their parent.

function App() {
  function showAlert() {
    alert(“Button clicked!”);
  }

  return <Button handleClick={showAlert} />;
}

function Button({ handleClick }) {
  return <button onClick={handleClick}>Click Me</button>;
}

export default App

App defines a function showAlert and passes it to the Button component as a prop named handleClick.

When the button is clicked, the function from the parent runs — this is how components communicate efficiently.

Using Destructuring for Cleaner Code

When using multiple props, repeating `props.` every time can make code look messy.

Instead, you can use destructuring to extract values directly.

Without destructuring:

function Product(props) {

return <h2>{props.name} – ${props.price}</h2>;

}

With destructuring:

function Product({ name, price }) {

return <h2>{name} – ${price}</h2>;

}

This is cleaner, shorter, and easier to read.

3. What Is State?

While props are used to pass data into a component, state is used to manage data inside a component.

State allows a component to remember information between renders and to update the UI when that information changes.

You can think of state as a component’s personal data storage.

Here’s an example:

Counter.js

import { useState } from “react”;
function Counter() {
  const [count, setCount] = useState(0);
  function increaseCount() {
    setCount(count + 1);
  }
  return (
    <div>
      <p>You clicked {count} times.</p>
      <button onClick={increaseCount}>Click Me</button>
    </div>
  );
}
export default Counter

App.js

import React from “react”;
import Counter from “./Counter”;
function App() {
  return (
    <div className=“App”>
      <h1>Simple Counter App</h1>
      <Counter />
    </div>
  );
}
export default App;

How this works:

The component uses the useState hook to create a state variable called count.
setCount is a function that updates the state.
Every time the user clicks the button, increaseCount is called, which updates the count value.
When the state changes, React automatically re-renders the component to display the updated count.

Key characteristics of state:

State is local to the component.
State can change over time.
When state changes, the component re-renders.
State is used for data that is expected to change based on user actions.

Use props to pass information into a component.

Use state to handle data within a component.

4. The Flow of Data in React

React follows a unidirectional data flow — meaning that data always moves from parent components down to child components through props.

This concept is often called one-way data binding.

Example:

import React from “react”;
function Child(props) {
  return <p>The message is: {props.message}</p>;
}
function Parent() {
  const message = “Hello from the Parent component!”;
  return <Child message={message} />;
}
function App() {
  return (
    <div className=“App”>
      <h1>Flow of data Example</h1>
      <Parent />
    </div>
  );
}
export default App;

Here’s what happens:

The Parent component defines a piece of data (message).
The Parent passes that data to the Child through props.
The Child receives it and displays it on the screen.
In this example, data flows downward — from the parent to the child.
If the parent updates its state or props, React re-renders the child component automatically with the new data.

5. Passing Data Upward (Child to Parent)

You might wonder — if data flows only one way, how can a child component send data back to its parent?

The answer is: by using callback functions.

A parent component can pass a function as a prop to a child component. When the child calls that function, it sends data back to the parent.

Example:

import React from “react”;
function Child(props) {
  return (
    <button onClick={() => props.onMessage(“Hello from the Child!”)}>
      Send Message
    </button>
  );
}
function Parent() {
  function handleMessage(childData) {
    alert(childData);
  }
  return <Child onMessage={handleMessage} />;
}
function App() {
  return (
    <div className=“App”>
      <h1>Parent to Child and Child to Parent Communication</h1>
      <Parent />
    </div>
  );
}
export default App;

How it works

The parent defines a function handleMessage() that will handle data from the child.
The parent passes this function as a prop called onMessage.
When the child calls props.onMessage() with a value, the parent receives that value as an argument.

So while the data flow is technically still one-way (top-down), we can use functions to send information upward by invoking callbacks.

6. The Relationship Between Props and State

Props and state often work together in React applications.

For example:

* A parent component might hold data in its state.

* It passes parts of that data to child components through props.

* If the parent’s state updates, the children automatically re-render with the new data.

Here’s a small example:

import React from “react”;
import { useState } from “react”;
function Child(props) {
  return <p>Current count: {props.count}</p>;
}
function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}
function App() {
  return (
    <div className=“App”>
      <h1>Passing State as Props Example</h1>
      <Parent />
    </div>
  );
}
export default App;

What’s happening here:

The parent stores the count in its state.
The parent passes that state value down to the child as a prop.
The child displays the current count.
When the user clicks the button, the parent’s state updates — and the child re-renders automatically.

This illustrates how stateful parents and stateless children work together using the flow of data in React.

To Summarize

Props are used to pass data from parent to child.
State is used to manage dynamic data within a component.
React’s data flow is unidirectional, meaning data moves only from top (parent) to bottom (child).
To communicate from child to parent, you can use callback functions.
Props and state often work together to make components reusable and interactive.