Reactjs Material UI state is undefined on event

0
votes

I'm building a simple app using react and material ui

Main component

'use strict';

import React from 'react';
import ProjectList from './projectlist';

export default class Application extends React.Component {
    constructor(props) {
        super(props);
    }

    changeProject() {
    }

    render() {
        return <div className="row">
                <div className="col s3">
                    <ProjectList
                        onProjectChangeEvent={this.changeProject}/>
                </div>
            </div>;
    }
}

ProjectList component

'use strict';

import React from 'react';
import Card from 'material-ui/lib/card/card';
import CardHeader from 'material-ui/lib/card/card-header';
import CardText from 'material-ui/lib/card/card-text';
import FlatButton from 'material-ui/lib/flat-button';
import CardActions from 'material-ui/lib/card/card-actions';

// FIXME: Remove when react1.0 is launched
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

export default class ProjectList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: props.data || [],
            changeEvent: props.onProjectChangeEvent
        };
    }

    componentDidMount() {

    }

    openEdit = () => {
        console.debug(this.state);   
    }

    render() {
        return <Card>
                    <CardHeader
                        title="Super Project Title"
                        subtitle="Super Project Subtitle"/>
                    <CardText>
                        Something important
                    </CardText>
                    <CardActions>
                        <FlatButton
                            label="Edit"
                            onTouchTap={this.openEdit}/>
                    </CardActions>
                </Card>;
    }
}

when I click the FlatButton, the console.debug(this.state) == undefined? How can I communicate with the Application component from the ProjectList component? I want to send the project object back to the Application. Inside the constructor the props exist, same goes for componentDidMount. But in the event it's undefined. How come?

Update Adding the change suggested by @taylorc93 gives me this error in the console

Uncaught (in promise) Error: http://localhost:3000/app/components/projectlist.js: Unexpected token (31:13)
  29 |     }
  30 | 
> 31 |     openEdit = () => {
     |              ^
  32 |         console.debug(this.state);   
  33 |     }
3
reactjs

3 Answers

0
votes

With the ES6 class changes, React no longer automatically binds this to all of your component's methods, just render, the constructor, and the lifecycle methods. https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

Thus, when openEdit is fired, this is not set to your react component. The easiest way to fix this is by using a neat trick with ES6 arrow functions like this:

openEdit = () => {
  console.debug(this.state);   
}

This takes advantage of the lexical this binding that arrow functions offer and will correctly bind this to your react component. This might be interesting to you for further reading: http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

Hope all of this helps!

0
votes

Define your function as

openEdit() {
  console.debug(this.state);   
}

Then you can either bind it in the constructor:

constructor(props) {
  super(props);
  this.openEdit = this.openEdit.bind(this);
}

and reference it normally:

<FlatButton label="Edit" onTouchTap={this.openEdit} />

Or just bind it when you reference it (no changes to the constructor necessary):

<FlatButton label="Edit" onTouchTap={this.openEdit.bind(this)} />
0
votes

Write like this:

openEdit () {
     console.debug(this.state);   
   }