What is the difference between State and Props

In React, state and props are two different ways of managing data in a component.

State is data that is managed and updated by the component itself. It is local to the component and can change over time as the result of user interactions or other events. State is managed using the useState hook or the setState method in class components.

For example, consider a simple counter component that displays a count and has a button to increment the count:

function Counter() {
  const [count, setCount] = useState(0);
 
  const handleClick = () => {
    setCount(count + 1);
  };
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
 

In this example, the count variable is part of the component's state. It is initialized to 0 using the useState hook and updated when the user clicks the "Increment" button by calling the setCount function.

Props, on the other hand, are data that is passed to a component from its parent. Props are read-only and cannot be modified by the component itself. Instead, they are used to pass data and event handlers down the component tree.

For example, consider a simple greeting component that displays a message based on a name prop:

function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}
 

In this example, the name variable is a prop that is passed to the Greeting component from its parent. The Greeting component uses this prop to display a personalized greeting message.

In summary, state and props are two different ways of managing data in a React component. State is local to the component and can change over time while props are passed from the parent and are read-only. Both state and props can be used together to build complex and interactive user interfaces. 😊