Most of the times I found beginners confuse between when to use state and when to use props. So, I thought let’s write an article about it.
State is nothing but a way to manage data inside a component. The main reason of using state instead of a normal object is that whenever we update a state using setState its re-render the component so that we can see the new data on the webpage.
The below example initialize the state with count value 0 and it renders the count value and an button which basically increment the count by 1.
Props is nothing but a short form of properties. Props are any value send from parent component to child component. The props are not allowed to be edited. In some cases if parent does not provide props then its uses default props set by the user using package prop-types.
In the below example we just passed count and onClick to the PropExample component.https://codesandbox.io/embed/react-example-01iim?fontsize=14&hidenavigation=1&theme=dark