React.js with TypeScript: Sharing Data Across Components using React.Context
![Image](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtK79c-_87ueCYsCQ1D5Jrcd3E9yxQfvpYl1xe9HGonvhUiXQFjaYK0A3Rg5ppzZqKYmh_-fL1PmfX___yC9JECAP2Ja0jX_PSxkJyTM8Vps9NAoWigvOUes8HwVPbFsDirlIAF_5pKYsRfSho_SFP_8zZ2rdZvnMJOGP3iO4syNx_VqFxOA9XkfrQDA8/s16000/Slide1.png)
In this article, we will see the step-by-step implementation of using " React.Context" to share data across components. We will use TypeScript as a programming language to implement the code for this article. Why TypeScript? TypeScript is an open-source language that increases JavaScript application productivity by providing a type system. TypeScript is a typed JavaScript that compiles to plain JavaScript. TypeScript delivers a unique and easy approach to building front-end applications. React Context React.js is a JavaScript Library for building interactive UI. This library is used to build the composable UI. In such cases, the UI may contain multiple components and these components may have a Parent-Child relationship across them. With the UI having such type of relationship, we may have the case of sharing data across the components. The Context provides a way to pass data through the components tree without having to pass props down manually at every level. We us