Answer
Props are values passed into a component from its parent, and a component cannot change its own props directly. State is data that a component manages internally and can change over time, usually in response to user actions, and changing state causes the component to re render.
function Greeting({ name }) { // name is a prop, passed in from the parent
const [visits, setVisits] = useState(0); // visits is state, managed internally
return (
<div>
<p>Hello, {name}</p>
<button onClick={() => setVisits(visits + 1)}>Visited {visits} times</button>
</div>
);
}Real-world example A user profile card receives the user's name as a prop from its parent page, while it manages whether its own details section is expanded or collapsed using its own internal state.