From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Building the language context and wrapping app in the provider

Building the language context and wrapping app in the provider

Welcome to this session on building a language context and wrapping your app in the provider. In this session, you'll learn how to use React Context to manage the language of your Story Collection app. This will allow you to easily switch between English and Spanish without manually passing props down through every component. We'll create a language context that holds the current language, a function to change the language, and a handy translation function. Let's import createContext from React. Let's create a new context called languageContext. I'm initializing it with undefined for now. Later, we'll provide a value when we wrap our application with the context provider. Let's create the LanguageProvider component. This will be responsible for providing the language context to the rest of our application. I'm exporting it so we can use it in our App.jsx file. Let's add Children as a prop to LanguageProvider. The Children prop will contain all the components that need access to the…

Contents