Props vs State in React

Let’s start with the definition of props and state in React.

“Prop” is an object and used to pass read-only data from one component to another. Data can only be sent by parents to child components dynamically.

“State” is a built-in React object where we can store property values. When the state object changes, the component re-renders.

In order to be familiar with each one, let’s give some examples below;

The reusable date variable that has the current date is being passed to the Header component with the special currentDate keyword.

In the Header component, we can easily use the prop – currentDate – passed by App.js

Props are used to pass data, whereas state is for managing data. – www.freecodecap.org.

In the example above, we initially imported useState object from the React library. Then we have created two different useState objects. The first one consists of task array and setTask setter function. The second one is having taskInput variable and setTaskInput setter function which changes the taskInput value whenever the user types on the input field. By the time the button is clicked, setTask function updates the task arrays in response to the state change and re-renders Task component to display the added task on the page.

Conclusion
Props are used to pass data to the child components while state is used to store the data and let the component render to modify the screen.
I hope this helps clarify the difference between the props and state in React. Thank you for reading!