What are props and state?

August 26, 2025

I-Hub Talent is recognized as one of the best Full Stack Java training institutes in Hyderabad, offering a comprehensive program designed to equip learners with the skills needed to excel in today’s competitive IT industry. The course covers everything from Core Java, Advanced Java (Servlets, JSP) to Spring Boot, Hibernate, REST APIs, and databases like MySQL, along with essential front-end technologies such as HTML, CSS, JavaScript, and frameworks like React.

What sets IHub Talent apart is its practical, project-based learning approach. Students gain real-world exposure through live projects and industry-driven case studies, ensuring they can confidently apply their skills in professional environments. The training is led by experienced mentors who bring years of industry expertise, guiding students step-by-step from basics to advanced concepts.

In addition to technical training, IHub Talent provides career-focused support including resume building, mock interviews, and dedicated placement assistance, enabling learners to secure job opportunities with top companies. The curriculum is regularly updated to match the latest industry trends, ensuring students remain competitive.

Whether you are a fresher looking to start your career or a professional aiming to upgrade your skills, IHub Talent offers the perfect environment to master Full Stack Java development and launch a successful IT career.

🔑 Props (Properties)

Props are inputs to a React component.
They are passed from parent to child (like function parameters).
They are read-only (a child cannot modify its own props).
Used when you want to configure a component.

👉 Example:


function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Welcome name="Roja" />;
}

Here, name="Roja" is a prop.
Welcome component receives it via props.
Output: Hello, Roja!

🔑 State

State is data that belongs to a component.
It can change over time (dynamic).
When state changes, React re-renders the component.
Managed inside a component, usually with the useState hook in functional components.

👉 Example:


import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Here, count is state.
When you click the button, setCount updates the state.
React re-renders to show the new count.

⚖️ Props vs State

Feature	Props	State
Where defined?	In the parent, passed to child	Inside the component itself
Read/Write	Read-only	Mutable (can change with `setState`/`useState`)
Purpose	To pass data into a component	To manage dynamic data inside a component
Who controls it?	Controlled by parent	Controlled by the component itself

👉 Quick Analogy:

Props = arguments you pass into a function.
State = local variables inside that function.

✅ In short:

Props: Data passed from outside a component (fixed, read-only).
State: Data managed inside a component (can change, triggers re-render).

What are promises?

What are components in React?

What is the virtual DOM?

Visit Our IHUB Talent Training Institute in Hyderabad

Search This Blog

full stack java