Accessing Layout State when a React Component is Clicked?

1

I’m using Material-UI and its React components. I was doing this and it was (and still is) working fine:

            <MenuItem key={3}
                      itsLayout={this}
                      onTouchTap={function () {
                                        this.itsLayout.handleLockOpen()
                                        this.itsLayout.setState({selectedAuthActionIsLogin: true})
                                        }
                                      }
            >Log In</MenuItem>

But now I’m getting a new console warning saying:

Unknown prop itsLayout on <span> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

If I need to update the state of the layout component from inside a component, what is the correct way to access the layout when that component is clicked?

2

Thanks to @Reanmachine on the Material-UI Gitter for the answer:

render() {
     //must be in the render function
     var onLoginClicked = () => {
        this.handleLockOpen()
        this.setState({selectedAuthActionIsLogin: true})
    }
 [....]
            <MenuItem key={3}
                      onTouchTap={onLoginClicked}
            >Log In</MenuItem>
3

You can also do it this way:

class Layout extends React.Component {
    [.....]
    onLoginMenuItemClicked() {
        this.handleLockOpen()
        this.setState({selectedAuthActionIsLogin: true})
    }
    [.....]
    render() {
[.....]
                <MenuItem key={3}
                          onTouchTap={() => this.onLoginMenuItemClicked()}
                >Log In</MenuItem>

[.....]

}