react-intl: How can update child component without passing "this.props.intl"

Question

When i change language object using intl library from parent component then i need to pass intl={this.props.intl} to child component for update. i am using FormattedMessage id="example" or this.props.intl.formatMessage({ id: "example" }). i have a chain of parent and child components. so i need to pass intl as props in every child or some component using multiple times. if i need to update child component then i need to pass intl in each and every child component. i need a solution. i don't want to pass this.props.intl in every child component.

Answer 1

When you have to pass props through the chain of multiple childs, use context.

Here is the CodeSandbox example.

Regarding when and how to use context, check this documentation.

Answer 2

Consider using Context API, When you want to share something common to a component tree, you can use this.

Also please check https://hackernoon.com/how-do-i-use-react-context-3eeb879169a2