• 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
6 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

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Which Neural DSP Archetype Plugins Should You Buy?
  • Smoke Detector Randomly Goes Off Early Hours of The Morning
  • Removing A Character From The Start/End of a String In Javascript
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz