• 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 ReplyCancel 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
7 years ago

Perfect! Clap-clap-clap!

0

Primary Sidebar

Popular

  • Handling Errors with the Fetch API
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • How To Paginate An Array In Javascript
  • Testing Event Listeners In Jest (Without Using A Library)

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz