title: How can I use react useContext , to show data from context, in the same component
body: <p>I am creating a react wizard component, and want to pass data נetween parent and children using contextץ</p>
  
  <p>So I created a wizard, context, provider, and custom hook, but the issue is that if I try to use the context, on the wizard component, it does not show the correct info </p>
  
  <p>(see <a href="https://codesandbox.io/embed/wizardwitcontext-rfpui" rel="noreferrer">https://codesandbox.io/embed/wizardwitcontext-rfpui</a> )</p>
  
  <p>How to make it so that I can rely on data in context on the wizard itself so I can transfer the login to the custom hook?</p>
  
  <p>useWizard.js:</p>
  
  <pre><code>import React, { useContext, useEffect } from "react";
  import { WizardContext } from "./WizardContext";
  
  const useWizard = () =&gt; {
    const [state, setState] = useContext(WizardContext);
  
    function setMaxSteps(maxSteps) {
      setState(state =&gt; ({ ...state, maxSteps }));
    }
    function moveToStep(index) {
      if (state.maxSteps &amp;&amp; state.maxSteps &gt; index) {
        setState({ ...state, currentStep: index });
        return index;
      }
      return state.currentStep;
    }
  
    function back() {
      if (state.maxSteps) {
        if (state.currentStep &gt; 0) {
          setState({ ...state, currentStep: state.currentStep - 1 });
          window.scrollTo(0, 0);
        }
      }
    }
  
    //move back a step
    function next() {
      if (state.currentStep &lt; state.maxSteps) {
        setState({ ...state, currentStep: state.currentStep + 1 });
        window.scrollTo(0, 0);
      }
    }
  
    return {
      setMaxSteps,
      moveToStep,
      back,
      next,
      maxSteps: state.maxSteps,
      currentStep: state.currentStep,
      state
    };
  };
  
  export default useWizard;
  
  </code></pre>
  
  <p>Wizard.jsx:  </p>
  
  <pre><code>const { state, currentStep, back, next, maxSteps, setMaxSteps } = useWizard();
  
  return (
      &lt;div className="wizard"&gt;
        &lt;WizardProvider
          maxSteps={React.Children.count(props.children)}
          currentStep={0}
        &gt;
          {/* &lt;div className="wizard__upper"&gt;
            &lt;ProgressIndicator currentIndex={selected} onChange={onClick}&gt;
              {steps}
            &lt;/ProgressIndicator&gt;
  
            &lt;Button id="wizardCloseBtn" kind="ghost" onClick={onClose}&gt;
              &lt;Icon icon={iconHeaderClose} /&gt;
            &lt;/Button&gt;
          &lt;/div&gt; */}
          &lt;div className="wizard__separator" /&gt;
          &lt;div className="wizard__content"&gt;
            {`in wizard: cur=${currentStep}, max=${maxSteps}`}
            {/* {getContentAt(0)} */}
            {stepContentWithProps}
          &lt;/div&gt;
  
          {/* &lt;div className="wizard__buttons"&gt;
            {showBack &amp;&amp; (
              &lt;Link id="back" onClick={back}&gt;
                back
              &lt;/Link&gt;
            )}
            {showNext &amp;&amp; (
              &lt;button id="next" onClick={next} kind="secondary"&gt;
                Next Step
              &lt;/button&gt;
            )}
          &lt;/div&gt; */}
        &lt;/WizardProvider&gt;
      &lt;/div&gt;
    );
  </code></pre>
  
  <p>Step2:</p>
  
  <pre><code>import React, { useState, useContext, useEffect } from "react";
  import useWizard from "./useWizard";
  
  function Step2(props) {
    const {
      currentStep,
      moveToStep,
      maxSteps,
      setMaxSteps,
      next,
      prev
    } = useWizard();
  
    return (
      &lt;div&gt;
        &lt;p&gt;Step 2&lt;/p&gt;
        {`in step2 (inner child of wizard): cur=${currentStep} see that cur !== cur from wizard above`}
        &lt;br /&gt;
        &lt;button onClick={() =&gt; moveToStep(1)}&gt;
          Click me to change current step
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  export default Step2;
  
  </code></pre>
  
  <p>End result is:</p>
  
  <pre><code>in wizard: cur=undefined, max=undefined
  p1
  
  in index.js: cur=undefined
  Step 2
  
  in step2 (inner child of wizard): cur=0 see that cur !== cur from wizard above
  
  
  </code></pre>