Skip to content Skip to sidebar Skip to footer

Is It Possible To Trigger Contained Component's Render From Within The Container In React?

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

Solution 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.


Post a Comment for "Is It Possible To Trigger Contained Component's Render From Within The Container In React?"