Analytics Vidhya
Published in

Analytics Vidhya

State vs props : Dissecting the concepts [React JS]

State and props!!!

People are usually confused by the state and the props of components..... including myself at some point.
Yeah, state and props are kinda similar to each other.
But there are some striking differences between them.
What are they?
Let’s find out!
By the way, I am Agbejule Kehinde Favour.
Now back to our topic.

State vs props

What are they about?

State is something that is managed within the component and can change over time.

It includes data that is private or local to the component.

Therefore, the local state of a component is completely invisible to other components.

But the props include data given to the component .

Lets say its the property of the component.

Modification characteristic

The props of a component cannot be modified.
This is because it is a read only input.

If you try assigning to it, you would get this.

Yeah and we don’t want that, do we?

On the other hand, the state of the component can be modified.
But there is one solid rule attached to this.

This is that a component can not access the state of another component talkless of modifying it.

In addition to this, I would advice that if you have a piece of data in a component which would still be modified as time goes on, that data should be entered into the state of the component instead of entering it as a prop.

Do components always need the state?

Sometimes, a component might not need a state.
It can get all its data from its props ( probably because there is no need modify anything)

With that said, let me give you an example.

Lets say you have a nav bar component in your app with a title and the username .
You want to use the nav bar component in a different component of your app so you render it in that component.

If you want more information about what I am talking about, check out this article

Back to my explanation

When you are done rendering it and it appears on your browser, Then you say;

“ Problem solved”.

But let’s say you want to have a different title on the nav bar in that component.

What do you do?
Probably create another nav bar component?
That would be pretty stressful and messy.

This is where the props comes in.

By the way: Props can be anything. In this example it is a string, but they can also be numbers, arrays, objects, functions, etc.

function Navbar(props) {    return (      <div>
{props.title}
</div>
</div>
{props.username}
</div>
)
}

De-structured props

function Navbar({title,username}) {return (      <div>
{title}
</div>
</div>
{username}
</div>
)
}

It would be rendered like this;

<Navbar title="title 2" />

And then you would have your customised nav bar component via props.

WARNING

You can’t change a prop like i said earlier (Modification Characteristic)

You can’t use this block of code where you are trying to modifiy the props

function Navbar(props) {    props.title = "greet"
return (
<div>
{props.title}
</div>
)
}

And for the state.
Let’s say you want the name of the user to be to be changed each time the user logs in.
In this case you have to enter it in the state to be able to modify the data.

Conclusion

The data in state is privately controlled by its component.

The state can be seen as the temporary memory of the component

While

The props can be called the property of the component and it can be used to customise the component.

Now do you see these concepts in a new light?

With that said, I hope this has been helpful to you.
You can drop your comments.
You can leave some 👏👏👏 if it has.
And also help one person out there to find this value.
You can follow me if you like this and want more value.
Thank you so much for your time!
Agbejule Kehinde Favour .
Peace y’all!

--

--

--

Analytics Vidhya is a community of Analytics and Data Science professionals. We are building the next-gen data science ecosystem https://www.analyticsvidhya.com

Recommended from Medium

“Switch

Learn React and Redux

Something about JavaScript

Brand New Capabilities of JavaScript Diagram Editor 3.0

JavaScript Diagram Editor — DHTMLX Diagram 3.0

What is ES6? Welcome to 21st Century

React Hack: Export & Import State

Micro-frontend implementation [part 3] — Angular contains React using Webpack 5 Module Federation

What the Webpack

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Favouragbejule

Favouragbejule

Content creator. I write articles to guide beginner programmers. Grab my beginner's web dev checklist for free https://favour-thoughts.ck.page/3ec3070512

More from Medium

Most frequently asked questions to crack full stack developer interviews

Data Structures and How To Build It From Scratch Series #0

React Application with Sinatra

Book Tracker Landing Page

LeetCode 121-Best Time to Buy and Sell Stock | JAVASCRIPT | Study Plan-Data Structure I. Day 3