Problem solving for props drilling using React context api

Here, we are little bit understand of react context api and how to resolve issue of props drilling.

React hooks provide a concept called context.

Basically Context api allows us to pass down and use (consume) data in whatever component we need in our React app without using props.

Props drilling:

React context helps us avoid the problem of props drilling.

Props drilling is a term to describe when you pass props down multiple levels to a nested component, through components that don't need it.
For example, we have access to name data that we want to pass as a prop to all of our app's components.

export default function App({ name }) {
  return (
    <>
      <Header name={name} />
      <Main name={name} />
      <Sidebar name={name} />
      <Footer name={name} />
    </>
  );
}

function Header({ name }) {
  return (
    <>
      <User name={name} />
      <Login name={name} />
      <Menu name={name} />
    </>
  );
}

What is the issue??
The issue is that we are drilling the name prop through multiple components that don't immediately need it.

The Header component doesn't need name other than to pass it down to its child component.

How i use React context to avoid the issue of props drilling.

Basically, React context is an api that introduced from React version 16.

Steps to using React context:

1. Create context using the createContext method.
2. Take your created context and wrap the context provider around your component tree.
3. Put any value you like on your context provider using the value prop.
4. Read that value within any component by using the context consumer.

For example, in our App, pass down our own name using Context and read it in a nested component:User.

import React from 'react';

export const FormContext = React.createContext();

export default function App() {
  return (
    <FormContext.Provider value="DevangiBhutiya">
      <User />
    </FormContext.Provider>
  )
}

function User() {
  return (
    <FormContext.Consumer>
      {value => <h1>{value}</h1>} 
      {/* prints: DevangiBhutiya */}
    </FormContext.Consumer>
  )
}

Now, we are understand step-by-step above example:

1. Above our App component, we are creating context with React.createContext() and putting the result in a variable, FormContext. In almost every case, you will want to export it as we are doing here because your component will be in another file. Note that we can pass an initial value to our value prop when we call React.createContext().

2. In our App component, we are using FormContext. Specifically FormContext.Provider. The created context is an object with two properties: Provider and Consumer, both of which are components. To pass our value down to every component in our App, we wrap our Provider component around it (in this case, User).

3. On FormContext.Provider, we put the value that we want to pass down our entire component tree. We set that equal to the value prop to do so. In this case, it is our name (here, DevangiBhutiya).

4. In User, or wherever we want to consume (or use) what was provided on our context, we use the consumer component: FormContext.Consumer. To use our passed down value, we use what is called the render props pattern. It is just a function that the consumer component gives us as a prop. And in the return of that function, we can return and use value.