Write a program to pass values to child using context.

1.	Write a program to pass values to child using context.
Answer» IMPORT React, { COMPONENT } from "react"; import Intl, { IntlProvider } from "./Intl"; import ReactDOM from "react-dom"; import "./styles.css"; class App extends Component { state = { language: "en" }; handleClick = () => { this.setState({ language: this.state.language === "en" ? "fr" : "en" }); }; render() { return ( <div className="App"> <IntlProvider language={this.state.language}> <p> <Intl id="hello" /> <Intl id="WORLD" />! </p> <p> <button ONCLICK={this.handleClick}>Toggle Language</button> </p> </IntlProvider> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);import React, { createContext } from "react"; const IntlContext = createContext(NULL); const IntlProvider = ({ children, language }) => { const languages = { en: { hello: "hello", world: "world" }, fr: { hello: "Bonjour", world: "monde" } }; return ( <IntlContext.Provider value={languages[language]}> {children} </IntlContext.Provider> ); }; const Intl = ({ id }) => ( <IntlContext.Consumer>{value => value[id]}</IntlContext.Consumer> ); export { IntlProvider }; export default Intl;

Discussion