Simple example:<\/p>\n
\r\nimport React from "react";\r\nimport ReactDOM from "react-dom";\r\n\r\nconst MyContext = React.createContext();\r\nconst MyProvider = MyContext.Provider;\r\nconst MyConsumer = MyContext.Consumer;\r\nconst data = { name: "Colin", age: 26 };\r\n\r\nclass HomePage extends React.Component {\r\n render() {\r\n return (\r\n <MyConsumer>\r\n {props => {\r\n return (\r\n <div>\r\n {props.name} : {props.age}\r\n <\/div>\r\n );\r\n }}\r\n <\/MyConsumer>\r\n );\r\n }\r\n}\r\n\r\nfunction App() {\r\n return (\r\n <MyProvider value={data}>\r\n <div>Context API application:<\/div>\r\n <hr \/>\r\n <HomePage \/>\r\n <\/MyProvider>\r\n );\r\n}\r\n\r\nconst rootElement = document.getElementById("root");\r\nReactDOM.render(<App \/>, rootElement);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"