Props and State

Started in 2011 by Jordan Walke at Facebook, React (also known as ReactJS or React.js) is a powerful tool that can be used to write dynamic, single page web applications. React works by using components which can (if needed) render HTML to the page. These components can hold their own data in an object known as “state” which has the ability to change over time. Aside from this each component can be passed data on its invocation known as properties, or "props".

For example...

class CoolComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            myFunKey: ‘value’,
            anotherGreatKey: 21
        }
    }

    render() {
        return (
            <div>
                <h1>This is my fun {this.state.myFunKey}</h1>
                <h2>{this.state.anotherGreatKey}</h2>
            </div>
        )
    }
}

Should the above render function invoke another component such values could be passed to it.

    render() {

        const stringOfText = ‘a wonderful string’

        return (
            <div>
                <h1>This is my fun {this.state.myFunKey}</h1>
                <h2>{this.state.anotherGreatKey}</h2>

                <ChildComponent firstProp={stringOfText} />
            </div>
        )
    }

The child component could then use the information passed to it by calling upon its props.

class ChildComponent extends React.Component {
    render() {
        return (
            <div>
                <h1>My props contain {this.props.firstProp}</h1>
            </div>
        )
    }
}

Whether it be from a user’s input or background process, state can change over time, but never directly. State is changed using the setState function. Were our CoolComponent to have a button which would add to state it would do so with the setState function.

    addToState = () => { 
        this.setState({anotherGreatKey: this.state.anotherGreatKey + 1})
    }

    render() {
        return (
            <div>
                <h1>This is my fun {this.state.myFunKey}</h1>
                <h2>{this.state.anotherGreatKey}</h2>

                <button onClick={this.addToState()}>Add to State!</button>
            </div>
        )
    }

The properties passed to a component can not only be a variable, but a function itself. The function is passed as props and if invoked, can access the state where it's called from. For example, if we wanted our ChildComponent to have a button which changed the state of its parent...

class CoolComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            myFunKey: ‘value’,
            anotherGreatKey: 21
        }
    }

    addToState = () => {
        this.setState({anotherGreatKey: this.state.anotherGreatKey + 1})
    }

    render() {
        return (
            <div>
                <h1>This is my fun {this.state.myFunKey}</h1>
                <h2>{this.state.anotherGreatKey}</h2>

                <ChildComponent functionProp={this.addToState} />
            </div>
        )
    }
}

class ChildComponent extends React.Component {
    render() {
        return (
            <div>
                <button onClick={this.props.functionProp()}>Add to State!</button>
            </div>
        )
    }
}

The button rendered by ChildComponent would then invoke a function in CoolComponent, changing CoolComponent's state.

Components can have properties which point to variables in state. As those variables in state change, the corresponding component's properties can reflect those changes.

With props and state at your disposal, writing a dynamic web application can be a breeze!

Blog

Adam La Rosa

Join Our Newsletter. No Spam, Only the good stuff.

Related