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?"