Reputation: 11
I'm currently initializing child components in the parent and putting them into an array. I'm passing a function into the children's props that just gets state.
<QuestionContainer
error={ () => this.state.currentError }
/>
The problem is that when I do this.setState({ currentError: x })
in the parent the child won't rerender because the error prop hasn't actually changed. I've tried this.forceUpdate
to no avail.
I know I could design it in a way where I don't need to initialize the child components into an array, but I'm wondering how I would force a rerender in this situation.
Upvotes: 1
Views: 1813
Reputation: 119
<QuestionContainer
error={ () => this.state.currentError }
ref="container"
/>
then
this.refs.container.forceUpdate()
dunno if this is the better approach tho
Upvotes: 2
Reputation: 8688
It's not clear why you pass a function that returns the value of currentError
, instead of just the value itself. Couldn't you just pass it like this:
<QuestionContainer error={this.state.currentError} /
>
And then, in QuestionContainer
's render, use it like e.g.
render() {
return (
<div>{this.props.error}</div>
)
}
If you want your example to work you need to call the function in QuestionContainer
:
render() {
return (
<div>{this.props.error()}</div>
)
}
Upvotes: 1
Reputation: 4211
You could also have some counter variable in the parent's state and increment it every time you setState
so if you pass it down to the child it should trigger the child's rerender.
Upvotes: 0