Props and State in React

Props and State in React

This concept is often misunderstood by beginners, I was also confused about this concept when I started learning react. Therefore in this article I would briefly talk about props and state in react.

But before then let’s start getting to know what react is.

What Is React?

React is seen as a JavaScript library created and maintained by Facebook. It’s is often referred to as a framework because of its capabilities and how it behaves. React is basically used for building user interfaces (UI’s)and also frontend application. Haven known what react is and what it is used for let’s get to understand what props and state In react are.

Props in React

In react when building a project (could be a web application), this project (app) could be broken down into different parts called “components” and also, data is being passed from one component to another. The way data is passed from a component to another is through what is known as “props”. Therefore props can simply be seen as way of passing data from one component to another (this could be from a parent to a child component).

  • Props are immutable and should only be sent from parent to child component

  • Props main function is to pass data from one component to another

State In React

Earlier I explained what a component in react is , now what a state does is to store data about a component and this data stored could change or changes overtime.This changes could come from system or user events such as serve request or user input. Let’s take a counter app for instance it updates changes from 0 to 1 ,2, 3 and so on each time a button is clicked , this updates (data) are being stored in a state.

  • A state mainly store data about a component.

  • The data store by a state is mutable i.e it can change overtime.

In Conclusion

Although props and state do similar things, but they are used differently in a project (app) . Props pass data from parent to child components. They are immutable and thus will not be changed. State on the other hand, handles data that will change.A good example is a registration form where the user types in data and state updates what was typed in by the user.