title: Context API is not Changing it's State at Global Level in React
body: <p>This is My App.js File</p>
  <pre><code>
  import 'bootstrap/dist/css/bootstrap.min.css';
  import Run from './Signupin/mainpage';
  import Exp from './afterlogin/patirel/patmain';
  import Exp1 from './afterlogin/adminrel/designdb';
  import Exp2 from './afterlogin/adminrel/consult';
  import Exp3 from './afterlogin/adminrel/support';
  import Exp4 from './afterlogin/patirel/one';
  import PostRequest from './afterlogin/adminrel/one';
  import Docc from './afterlogin/docrel/one';
  import {Routes,Route} from 'react-router-dom';
  import Done from &quot;./appointment/appointment&quot;;
  import * as React from 'react';
  
  
  
  
  function App() {
   
  
    return (
  
      &lt;div&gt;
      &lt;Routes&gt;
        &lt;Route index element={&lt;Run/&gt;} /&gt;
        &lt;Route path=&quot;/patmain&quot; element={&lt;Exp/&gt;} /&gt;
        &lt;Route path=&quot;/adco&quot; element={&lt;PostRequest/&gt;} /&gt;
        &lt;Route path=&quot;/adco1&quot; element={&lt;Exp1/&gt;} /&gt;
        &lt;Route path=&quot;/adco2&quot; element={&lt;Exp2/&gt;} /&gt;
        &lt;Route path=&quot;/adco3&quot; element={&lt;Exp3/&gt;} /&gt;
        &lt;Route path=&quot;/adco4&quot; element={&lt;Exp4/&gt;} /&gt;
        &lt;Route path=&quot;/docc1&quot; element={&lt;Docc/&gt;} /&gt;
        &lt;Route path=&quot;/appoint&quot; element={&lt;Done/&gt;} /&gt;
      &lt;/Routes&gt;
      &lt;/div&gt;
   
  
    );
  }
  
  export default App;
  
  </code></pre>
  <p>My index.js file</p>
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import './index.css';
  import App from './App';
  import {BrowserRouter} from 'react-router-dom';
  import {Appointment} from &quot;./appointment/Context&quot;
  
  
  ReactDom.render(&lt;BrowserRouter&gt;&lt;Appointment&gt;&lt;App /&gt;&lt;/Appointment&gt;&lt;/BrowserRouter&gt;, document.querySelector('#root'));
  
  
  </code></pre>
  <p>My Context Provider file where the state emailinfo is not being updated in this file</p>
  <pre><code>import {createContext,useState } from 'react';
  import * as React from 'react';
  
  
  
  
  
  
  export const Contextforabhishek= createContext({});
  
   
  export const Appointment=({children})=&gt;{
  
   
    const [emailinfo, setemailinfo] = useState(&quot;NA&quot;);//Not Getting Updated at Global Level
  
  
  
    const yy={emailinfo,setemailinfo}
  
  return(
    &lt;&gt;
    &lt;Contextforabhishek.Provider value={yy} &gt;{children}&lt;/Contextforabhishek.Provider&gt;
    
    &lt;/&gt;
  );
  
  
  }
  </code></pre>
  <p>This is the file from where i want the data, file Patmain to File Appointment. I am using useContext inside this.</p>
  <pre><code>import &quot;./Appyss.css&quot;;
  import { Button, Modal, Dropdown} from &quot;react-bootstrap&quot;;
  import { useState, useEffect,useContext} from &quot;react&quot;;
  import { Contextforabhishek } from '../../appointment/Context';
  import * as React from 'react';
  //import { Link } from 'react-router-dom'
  
  
  
  function Patmainss(props) {
  
    return (
      &lt;div className=&quot;forall&quot;&gt;
      &lt;Modal
        {...props}
        size=&quot;lg&quot;
        aria-labelledby=&quot;contained-modal-title-vcenter&quot;
        centered
      &gt;
        &lt;Modal.Header closeButton&gt;
          &lt;Modal.Title id=&quot;contained-modal-title-vcenter&quot;&gt;
          {props.title} {props.Introduction}
          &lt;/Modal.Title&gt;
        &lt;/Modal.Header&gt;
        &lt;Modal.Body&gt;
          &lt;p&gt;{props.Description}&lt;/p&gt;
        &lt;/Modal.Body&gt;
        &lt;Modal.Footer&gt;
          &lt;Button onClick={props.onHide}&gt;Close&lt;/Button&gt;
        &lt;/Modal.Footer&gt;
      &lt;/Modal&gt;
      &lt;/div&gt;
    );
  }
  
  
  
  function Patmain() {
  
   const {emailinfo,setemailinfo }=useContext(Contextforabhishek);
   const infor=(e)=&gt;{
    const m=e.target.id;
    setemailinfo(m);
  }
  
  
  console.log(emailinfo);{/* THE STATE IS BEING CHANGED HERE BUT THAT SAME STATE IS NOT OBTAINABE AT FILE APPOINTMENT*/}
      
  
    const [runing, setRuning] = useState(
      {
        runing:&quot;2&quot;
      },
    );
  
  
  
  
    const Runing = (e) =&gt; {
      setRuning({
       runing:&quot;2&quot;
       
      });
    };  
    
    const [modalShow, setModalShow] = useState(false);
    const [Fetchdoc, setFetchdoc] = useState([
      {
     
      },
    ]);
  
    const [doct, setDoct] = useState({
      First_Name: &quot;&quot;,
      Intro:&quot;&quot;,
      Description: &quot;&quot;,
      Check_Up_Address:&quot;&quot;
    });
  
  
    const [renn,setRenn] = useState({
      renn:&quot;a&quot;,
    });
  
    const handleRenn = (e) =&gt; {
      Runing();
      setRenn({
       renn:&quot;a&quot;,
       
      });
    };  
  
    const handleRenn1 = (e) =&gt; {
      Runing();
      setRenn({
       renn:&quot;aa&quot;,
      
      });
      
    };  
  
    const handleRenn2 = (e) =&gt; {
      Runing();
      setRenn({
       renn:&quot;aaa&quot;
      });
      
    };  
  
    const handleRenn3 = (e) =&gt; {
      Runing();
      setRenn({
       renn:&quot;aaaa&quot;
      });
     
    };  
  
    const handleRenn4 = (e) =&gt; {
      Runing();
      setRenn({
       renn:&quot;aaaaa&quot;
      });
     
    };  
  
    
  
    useEffect(() =&gt; {
      if(runing.runing===&quot;2&quot;)
      {
    
      if(renn.renn===&quot;a&quot;){
      fetch(&quot;http://localhost:8001/docconfirmed&quot;)
        .then((res) =&gt; res.json())
        .then((jsonRes) =&gt; setFetchdoc(jsonRes),[]);}
      else if(renn.renn===&quot;aa&quot;){
  
  
        const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ practice:'Orthopaedic' })
  
      };
      fetch('http://localhost:8001/docconfirmed1',requestOptions )
          .then(response =&gt; response.json())
          .then((jsonRes) =&gt; setFetchdoc(jsonRes));
  
  
      }
      else if(renn.renn===&quot;aaa&quot;){
  
  
        const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ practice:'Paediatrician' })
      };
      fetch('http://localhost:8001/docconfirmed1',requestOptions )
          .then(response =&gt; response.json())
          .then((jsonRes) =&gt; setFetchdoc(jsonRes));
  
  
      }
      else if(renn.renn===&quot;aaaa&quot;){
  
  
        const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ practice:'General-Physician' })
      };
      fetch('http://localhost:8001/docconfirmed1',requestOptions )
          .then(response =&gt; response.json())
          .then((jsonRes) =&gt; setFetchdoc(jsonRes));
  
  
      }
      else if(renn.renn===&quot;aaaaa&quot;){
  
  
        const requestOptions = {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ practice:'Audiologist' })
      };
      fetch('http://localhost:8001/docconfirmed1',requestOptions )
          .then(response =&gt; response.json())
          .then((jsonRes) =&gt; setFetchdoc(jsonRes));
  
  
      }
      runing.runing=&quot;stop&quot;;
     
    }
      
    });
  
    const handleClick = (e) =&gt; {
      setModalShow(true);
      const { name, alt,id} = e.target;
      
      
  
      setDoct({
        First_Name: name,
        Intro: id,
        Description: alt,
      });
    };
    
   
  
    return (
      &lt;div&gt;
      &lt;div className=&quot;column&quot;&gt;
        &lt;h2 style={{color:'purple',fontWeight: 'bold'}} className=&quot;msgs&quot;&gt;Click On The Images To Get More Details On Your-Aid Doctors&lt;/h2&gt;
        &lt;div style={{marginLeft : 50, marginTop : 20, marginDown : 90,  display: &quot;block&quot;, width: &quot;30%&quot;, height: &quot;40%&quot; }}&gt;
      &lt;Dropdown&gt;
      &lt;Dropdown.Toggle variant=&quot;primary&quot; id=&quot;dropdown-basic&quot; style={{paddingTop : 12,paddingLeft : 795, paddingBottom : 12, paddingRight : 20, paddingDown : 100, }}&gt;
      &lt;h4 style={{textAlign: 'left',color:'black'}}&gt;
        Click Here To Choose The Required Specialisation
        &lt;/h4&gt;
      &lt;/Dropdown.Toggle&gt;
      &lt;Dropdown.Menu&gt;
        &lt;Dropdown.Item onClick={handleRenn}&gt;View All Doctors&lt;/Dropdown.Item&gt;
        &lt;Dropdown.Item onClick={handleRenn1}&gt;Orthopaedic&lt;/Dropdown.Item&gt;
        &lt;Dropdown.Item onClick={handleRenn2}&gt;Paediatrician&lt;/Dropdown.Item&gt;
        &lt;Dropdown.Item onClick={handleRenn3}&gt;General-Physician&lt;/Dropdown.Item&gt;
        &lt;Dropdown.Item onClick={handleRenn4}&gt;Audiologist&lt;/Dropdown.Item&gt;
      &lt;/Dropdown.Menu&gt;
    &lt;/Dropdown&gt;
    &lt;/div&gt;
  
        &lt;div
          className=&quot;forall&quot;
        &gt;
          {Fetchdoc
            .sort((a, b) =&gt; {
              var titleA = a.title;
              var titleB = b.title;
              if (titleA &lt; titleB) {
                return -1;
              }
              if (titleA &gt; titleB) {
                return 1;
              }
              return 0;
            })
            .map((doct) =&gt;{
  
              const First=doct.First_Name;
              const Last=doct.Last_Name;
              const Lasts=doct.practice;
             //const Emaill=doct.Email;
              return (
                // handleEmailInfo(e.target.id)}
                  &lt;l1&gt;&lt;ul&gt;&lt;button onClick={infor} className=&quot;btn btn-dark&quot; style={{marginLeft : 200, marginTop : 80, display: &quot;block&quot;, width: &quot;15%&quot;, height: &quot;40%&quot; }} id={doct.Email} &gt;Book An Appointment With { First }&lt;/button&gt;
  
                &lt;div className=&quot;mores&quot;&gt;
      
                    &lt;img
                      //key={/**/}
                      id={&quot; ( Call@&quot; +String(doct.Doctors_Phone)+&quot; )&quot;}
                      src={doct.Image}
                      alt={String(doct.Description)+&quot; Email-ID@ &quot;+String(doct.Email)}
                      name={String(doct.First_Name)+&quot; &quot;+String(doct.Last_Name)}
                      width=&quot;260&quot; 
                      height=&quot;190&quot;
                      onClick={handleClick}
                    &gt;&lt;/img&gt;
                    &lt;l1 style = {{ marginLeft : 20, color:'black', 'font-size': '32px',fontWeight:100}} &gt; {String(First)+&quot; &quot;+String(Last)}&lt;ul style={{ marginTop : 10, color:'white', 'font-size': '26px',fontWeight:80}}&gt;{String(Lasts)}&lt;/ul&gt;&lt;/l1&gt; 
                    &lt;br&gt;&lt;/br&gt;
                    &lt;br&gt;&lt;/br&gt;
    
    
                      &lt;/div&gt;
                      &lt;/ul&gt;&lt;/l1&gt;
              );
  
            })}
        &lt;/div&gt;
        
        &lt;Patmainss
          show={modalShow}
          onHide={() =&gt; setModalShow(false)}
          title={doct.First_Name}
          Introduction={doct.Intro}
          Description={doct.Description}
        /&gt;
    
      
      &lt;/div&gt;
      &lt;/div&gt;
    );
    
  }
  
  
  
  export default Patmain;
  
  
  </code></pre>
  <p>file Appointment where i want the Context Data to be but the state is always at NA emailinfo doesn't change the state at global level</p>
  <pre><code>import * as React from 'react';
  import {useContext } from 'react';
  import { Contextforabhishek } from './Context';
  
  
  export default function All(){
  
    const {emailinfo}=useContext(Contextforabhishek);//state is unchanged trying to change the state in Patmain file there it changes but here it doesn't change
  
  
    console.log(&quot;obtained&quot;,emailinfo)
    return(
      &lt;div&gt;
  
     &lt;h1&gt;(Done Page) Book an Appointment with: {emailinfo}&lt;/h1&gt;
     {/* &lt;button onClick={(e)=&gt;{setemailinfo(&quot;ll&quot;)}}&gt;click&lt;/button&gt; */}
      &lt;/div&gt;
  
    );
  }
  
  </code></pre>
  <p>It's been days and still cannot figure out why this is happening please help me out</p>