React: Prop VS State

React is an open-source front-end Javascript library used for building user interfaces. It is maintained by a community of developers and Facebook. React uses Babel, a Javascript compiler, used to convert edge JavaScript(ES6) into plain old ES5 JavaScript that can run in any browser, even the old ones.

JSX is a syntax extension to Javascript. JSX allows us to shorten code used in vanilla Javascript.

PROP VS STATE

What is a Prop?

Props are short for properties. It is a special keyword in React, that is used for passing data from one component to another. Essentially, props are arguments passed into React components. Props are passed via JSX attributes. They are set by the parent component and cannot be changed. The only way to change React elements is to render a new element when you want to change something.

What is state?

State is a Javascript object that that stores component’s dynamic data and it enables a component to keep track of changes between renders. State is dynamic, you use it for interactivity so you would not use it for static projects.

State can only be used within a class and usually, the only place you would assign this.state is the constructor. State is managed within the component. It describes the status of the entire program or an individual object. It could be text, a number, a boolean, or another data type.

State should not be modified directly, but it can be modified with a special method called setState().

In Conclusion:

Components receive outside data with props, they can manage their own data with state.

We use props to pass data, we use state to manage data.

Props should be passed from parent component.

Props cant be modified by a component receiving it from outside.

State can be modified in its component but can’t be accessed outside of it.

State should be modified with setState() method.

I hope this helped with differentiating prop vs state. For more information, check out the React documentation, https://reactjs.org/docs/hello-world.html. Happy Coding! :)

--

--

--

Fullstack software engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

NuxtJS JWT Authentication

How to calculate the Hamming distance

Node.js | Automation With onsave

Frequently asked code snippets in JavaScript interview

Hosting ReactJS App as Static site using Apache: Solving Client-Side 404 Issues

Promises in Javascript

Dlithe Bootcamp .NET Full Stack Developer- Week 3

Set up Webpack 5 for Basic Javascript Projects

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
Cori b

Cori b

Fullstack software engineer

More from Medium

Tips on Creating Unit Tests Using Jest

How to test a React App, with Jest and react-testing-library

A React Christmas

What to unit test in a React App