React: why child component doesn't update when prop changes
Update the child to have the attribute 'key' equal to the name. The component will re-render every time the key changes.
Child { render() { return <div key={this.props.bar}>{this.props.bar}</div> }}
Because children do not rerender if the props of the parent change, but if its STATE changes :)
What you are showing is this:https://facebook.github.io/react/tips/communicate-between-components.html
It will pass data from parent to child through props but there is no rerender logic there.
You need to set some state to the parent then rerender the child on parent change state.This could help. https://facebook.github.io/react/tips/expose-component-functions.html
I had the same problem.This is my solution, I'm not sure that is the good practice, tell me if not:
state = { value: this.props.value};componentDidUpdate(prevProps) { if(prevProps.value !== this.props.value) { this.setState({value: this.props.value}); }}UPD: Now you can do the same thing using React Hooks:(only if component is a function)
const [value, setValue] = useState(propName);// This will launch only if propName value has chaged.useEffect(() => { setValue(propName) }, [propName]);