📦 What are Props?
Props (short for properties) are used to pass data from one component to another. They are read-only and cannot be modified by the component that receives them.
Think of props like parameters to a function — you pass them in and use them inside.
🧠 Example: Passing props to a component
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return <Welcome name="Harsh" />;
}
🧠 What is State?
State is a built-in object that holds data or information about the component. When the state changes, the component re-renders automatically.
👨💻 Example: Using useState in a component
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
✅ Conclusion
Use props when passing data to components, and use state when managing data that changes over time. Understanding both helps you build reusable and interactive UIs in React.
