React Props and State

In React, data always flows from the parent component down to the child component(s) in one direction (unidirectional). Data never flows up from the child to the parent. React passes data from one component to another component by using props. Any data that a component needs to track (store) is passed to a state property. The state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it. Data can be “passed” back to the parent via a callback function and the parent component can then update its data.

Props is a read-only property (object) that is used for the flow of data from a parent component to its child component. The child component can access all the properties it receives via the props object. All data assigned to props are read-only and cannot be changed by the child component. Thus, all React components must act like pure functions with respect to their props.

State is referred to the data (information) at an instant in time during a program run. All properties (variables) you create in a React component have their own state. The data that each property retains can be changed (as state) over time. When a parent component passes a state property as a prop to a child component, the state of these variables are read-only and cannot be changed. The value of a variable can be changed only through the state object in the component that owns it.

Consider a parent class component as follows:

import React from 'react';

//Parent Class Component
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { point: 10 }
        this.updateMe = this.updateMe.bind(this);
    }    
    updateMe() {
        let rnd = Math.floor(Math.random() * 10);
        this.setState({point: rnd});
    }
    render() {
        let message = "Please Update Me!";
        return (
            <ChildUpdate 
              point={this.state.point} 
              update={this.updateMe} msg={message}/>
        );
    }
}

Here’s what a child class component might look like.

//Child Class Component
class ChildUpdate extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div style={{margin:'25px',
              			textAlign:'center',
                        fontSize:'20px'}}>
                <span id='me'>{this.props.point}</span><br />
                <button onClick={this.props.update}>
                  {this.props.msg}
            	</button>
            </div>
        );
    }
}

Compare the child class component above with the child function component below.

//Child Function Component
function ChildUpdate(props){
    return (
        <div style={{margin:'25px',
          			textAlign:'center',
                    fontSize:'20px'}}>
            <span id='me'>{props.point}</span><br />
            <button onClick={props.update}>
              {props.msg}
        	</button>
        </div>
    );
}

Notice the removal of the keyword “this” as it is no longer a class component. In react, only class components have access to the “this” reference; function components do not.

This is not to be confused with a normal function constructor which can use “this”. See example below.

//Constructor Function in JS (ES5)
function Pet( breed, age ){
	this.breed = breed,
    this.age = age
}
pet = new Pet('Poodle',5);
console.log('My ' + pet.breed + ' is ' + pet.age + ' years old.');
//My Poodle is 5 years old.