Using UseContext in React to Pass Information

During my software engineering program at Flatiron School, I have built apps using Python/Flask and JavaScript/React. On the frontend(React), information is passed from a parent component to it’s children through something called props. <img alt="" src="https://miro.medium.com/v2/resize:fit:618/1*fApYzOMZer-RZNjWqRoAnQ.png" style="height:387px; width:687px" /> <img alt="" src="https://miro.medium.com/v2/resize:fit:630/1*xmS8VH-RMZrqhxJj_wlAxw.png" style="height:33px; width:700px" /> In the example above, Edit is the parent component to EditItems. Information that EditItems needs is contained in the Edit function and is made available by sending it as a prop when creating the EditItems component. EditItems then accesses this information by including it in it’s parameters. This is the standard way to pass information to the children of components, but this method can become very tedious when multiple components need the same information in a complex component tree hierarchy. Another way to pass information down to the children components is to use UseContext. <img alt="" src="https://miro.medium.com/v2/resize:fit:521/1*wd7sQli-Pd74AltBun2NcQ.png" style="height:300px; width:579px" /> In my project, user was need in multiple components located at different levels in the component tree hierarchy. To set this up, I included the code above in its own context folder. <img alt="" src="https://miro.medium.com/v2/resize:fit:574/1*itW2_0JcH2PZf02oVqwN-g.png" style="height:199px; width:638px" /> In order for the children components to have access to the context information, they must be wrapped in the <UserProvider> component. In my case, I put this in my index.js file so that all the components could access the information if needed. <a href="https://medium.com/@mattjhlee25/using-usecontext-in-react-to-pass-information-bb8e331e6878">Click Here</a>