The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Manage React Component State with setState

Manage React Component State with setState

2:28
State is used for properties on a component that *will change*, versus static properties that are passed in. This lesson introduces you to updating state through a simple text input and displaying that in the browser.
Watch this lesson now
Avatar
egghead.io

State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components.

Avatar
Richard

Can you explain why the need to use this.update.bind(this) in the onChange attribute?

Avatar
Joel

Can you explain why the need to use this.update.bind(this) in the onChange attribute?

Previously with React.createClass you would get autobinding. When you use es6 classes, this is no longer the case, so you need to explicitly bind the this scope of event handler functions. People will also do this in the constructor or through a more "es7" style property binding.

constructor(props) {
        super(props);
        this.update = this.update.bind(this);
    }
MyComponent extends React.Component {

    update = () => this. update();

    render() {
    // ...
In reply to Richard
Avatar
Irvin

Which is the preferred way?

In reply to Joel
Avatar
jeff

I would love a short tutorial about this.

In reply to Joel
Avatar
Somsubhra

I was trying to use ES7 style and was getting a syntax error..Is there anything I am doing incorrectly

class App extends React.Component {
...
update = () => this.updateEnteredText();
updateEnteredText(e){
...
}
render() {
.....

In reply to Joel
Avatar
Rajeev
_bind(...methods) {
  methods.forEach( (method) => this[method] = this[method].bind(this) );
 }

I am doing it this way and then inside constructor
this._bind('methodName1','methodName2');

In reply to Irvin
Avatar
Kode

Could I please ask which editor (Atom?) and what plugins you are using? It is like magic and I'd love to make those efficiency gains!

Avatar
Pete

I had some trouble with this because the code in the video does not match the code under Code. I was able to resolve it by adding:

import ReactDOM from 'react-dom';

and

changing:

export default App

to

ReactDOM.render(<App />, document.getElementById('app'));

The JSBin HTML file has script links to fb.me for react and react-dom, so that it does work there, but that is not part of the course lesson.

In further investigation, I found on the github repo for lesson 4 that main.js had been returned to its original state. In one of the earlier lessons, he deletes several lines, but never indicates in subsequent lessons that he put them back.

Avatar
Tommy

Thank you for this, this worked for me.

In reply to Pete
Avatar
Glenn

I've got the code for this part working, however in the browser console I see

B:\Projects\JS\react-learning\node_modules\react-error-overlay\lib\overlay.js:66
Uncaught TypeError: Cannot read property 'error' of undefined
 at renderErrorByIndex (B:\Projects\JS\react-learning\node_modules\react-error-overlay\lib\overlay.js:66)
at switchError (B:\Projects\JS\react-learning\node_modules\react-error-overlay\lib\overlay.js:86)
at shortcutHandler (B:\Projects\JS\react-learning\node_modules\react-error-overlay\lib\overlay.js:145)
at keyHandler (B:\Projects\JS\react-learning\node_modules\react-error-overlay\lib\effects\shortcuts.js:17)

Not sure what is causing this. My code looks like the following:

import React from 'react';
import PropTypes from 'prop-types'; // React.PropTypes is deprecated apparently

class App extends React.Component {
    constructor(){
        super();
        this.state =  {
            txt: 'this is dynamic text'
        }
    }

    update( e ){
        this.setState({txt: e.target.value})
    }

    render() {
        let txtProp = this.props.txt;
        let numProp = this.props.cat;
        return ( 
            <div>
                <h1>Hello World - {txtProp} + {numProp} </h1>
                <input type="text" onChange={this.update.bind(this)}/>
                <h2>{this.state.txt}</h2>
            </div>
        )
    }
}

App.propTypes = {
    txt: PropTypes.string,
    cat: PropTypes.number.isRequired
}

App.defaultProps = {
    txt: "default text"
}

// const App = () => <h1>Hello Stateless</h1>

export default App
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?