Tzury Bar Yochay Tzury Bar Yochay - 10 days ago 3
React JSX Question

Inter Components Communication With React

I am trying to get a very simple react app up-and-running.

The use case is straightforwards:
An auto-complete component that gets an array of account names, and upon value changed (user has selected the value) - fire event that will display the account.

Here is a code snippet, which I am trying to get work in a way that showAccount method will have access to App's state.

How can I access App's state from

showAccount()
?

import React, { Component } from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AutoComplete from 'material-ui/AutoComplete';


// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

import './App.css';


class App extends Component {
constructor () {
super();
this.state = {accounts: []}
}

componentDidMount() {
this.setState({ accounts: [
{account_name: "foo", account_id: 1},
{account_name: "bar", account_id: 2}
]})
}

showAccount (value) {
// HERE IS THE PROBLEM!
// `this` points to AutoComplete rather than to App
console.log(this.state.accounts)
}

render() {
return (
<MuiThemeProvider>
<div className="App">
<center>
<AutoComplete
floatingLabelText="account name"
filter={AutoComplete.caseInsensitiveFilter}
dataSource={this.state.accounts.map((account) => account.account_name)}
onUpdateInput={this.showAccount}
/></center>
</div>
</MuiThemeProvider>
);
}
}

export default App;

Answer

Don't you miss binding the showAccount method?

Check this code, there's an example of how to bind it, you need to do the same with your showAccount method.

class InputExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { text: '' };
    this.change = this.change.bind(this);
  }

  change(ev) {
    this.setState({ text: ev.target.value });
  }

  render() {
    let { text } = this.state;
    return (<input type="text" value={text} onChange={this.change} />);
  }
}

In ECMAScript 2015 classes you need to bind your methods manually.

I don't have time to expand more, because I'm at work, but check this article

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/ Check the ECMAScript 2015 classes section The sample code is from that post

Regards

Comments