• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

ReactJS: Props vs State

React.js · November 18, 2014

Developers new to ReactJS seem to get confused as to what the difference between props and state are inside of components. After all, they do both work similarly but there are some differences.

Props aka Properties

The easiest way to think of the role of “props” is to use an example. If you want to put a password field into a form you would do something like the following:

<input type="password" name="password">

The input itself is the component and “type” and “name” are props of the component, they are the equivalent of configuration options provided onload.

As far as the component is concerned they are immutable and can not be changed from the component itself. Meaning you can not change what has already been provided after the fact.

Properties are very similar to HTML attributes. While in some circumstances they can look immutable but have mutable content inside of them, generally they are immutable.

State

This is where you will see the difference. While a component can have default values supplied to it when a component is initialised, this is where things differ from that of props.

A state suffers from mutations usually as a result of a user action, such as a state value that keeps track of whether or not the user has clicked on a button or pressed the enter key twice.

A state is a private snapshot in time of a component that can not be modified by any other component, like a child component. It is private to that one component only. Unlike props which can be passed down to child components from a parent component, state cannot be passed, at least not directly.

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Ralph Spoilsport
Ralph Spoilsport
7 years ago

I think you mean to say:

The input itself is the component and “type” and “name” are PROPS of the component…

not:

The input itself is the component and “type” and “name” are components of the component…

0
Evgeny
Evgeny
6 years ago

Perfect! Clap-clap-clap!

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • The Most Common iPhone Passcodes (and how to guess them)
  • Wild Natural Deodorant Review
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz