Ad

Reactjs Material UI State Is Undefined On Event

- 1 answer

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 |     }
Ad

Answer

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)} />
Ad
source: stackoverflow.com
Ad