2

So I got App which implements a componentDidMount and render.

App contains 2 components, one, an AutoComplete input, and the other is a CardView.

The plans is that once a user have chosen an item from the AutoComplete list, to display it in the CardView

I wonder how would I trigger CardView's render (i.e. setting it's state) from within the AutoComplete event handler.

See the line that reads:

// willing to trigger CardView's render right here.

In the code below.

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: []}
    this.showAccount = this.showAccount.bind(this);
  }

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

  showAccount (value) {
    // willing to trigger CardView's render right here.
  }

  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>
        <CardView />
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;
Tzury Bar Yochay
  • 8,798
  • 5
  • 49
  • 73
  • Check out https://facebook.github.io/react/docs/refs-and-the-dom.html. – Jed Fox Nov 23 '16 at 20:37
  • why not pass props to the card? This way you can setState in your show account function and pass that state down to the card. – Chaim Friedman Nov 23 '16 at 20:44
  • @usedToBeFat at declaration time, the chosen value is known. How to I refer to Card's props from within the `showAccount` handler? – Tzury Bar Yochay Nov 23 '16 at 20:49
  • in your question you state that once a user choose an item from the auto complete list you want to display said item. If I understood that correctly, then you don't need the card's render method. All you need it to call setState which will cause another render, and this time the card will get props that it will display. Or am I missing something? – Chaim Friedman Nov 23 '16 at 20:58
  • @usedToBeFat - if you can use my code to explain what you mean that will be the best. – Tzury Bar Yochay Nov 23 '16 at 21:01
  • ok will work on that now. – Chaim Friedman Nov 23 '16 at 21:02

1 Answers1

1

Here is my answer based on how I understand your question.

class CardView extends Component {
  constructor() {
    super()
  }

  render() {
    if (this.props.account) {
      return (
        <p>{this.props.account.account_name}</p>
      )
    }
    else {
      return (
        <p>no data</p>
      )
    }

  }
}
  class App extends Component {
  constructor () {
    super();
    this.state = {accounts: [], infoToDisplay: ''}
    this.showAccount = this.showAccount.bind(this);
  }

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

  showAccount (value) {
    let infoToDisplay = this.state.infoToDisplay;
    infoToDisplay = value;
    this.setState({infoToDisplay}); 
    // this line will cause a rerender after the user has chosen something
    // from the autoComplete list
  }

  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>
        <CardView accounts={this.state.infoToDisplay} /> 
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

what I have done, is give the app component state to keep track of the user's selection. I then pass this state as props to the card component. When the state is full card will show it, so in the showAccount function i call setState on infoToDisplay which causes another render, now the card's props will be full with the latest info and display it.

Hope this is clear.

Tzury Bar Yochay
  • 8,798
  • 5
  • 49
  • 73
Chaim Friedman
  • 6,124
  • 4
  • 33
  • 61