title: ReferenceError: Cannot access 'steps' before initialization
body: <p>I'm trying to make wizards in ReactJS. I'm following an <a href="https://www.cluemediator.com/how-to-create-step-wizard-in-react" rel="noreferrer">online tutorial</a>, however they haven't explained how to make it by multiple pages. So I tried my own way to apply it, but it didn't work.</p>
  <p>Here is the code of the first page:</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Button, Form } from &quot;react-bootstrap&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import &quot;./style.css&quot;;
  function NewGame() {
    const [activeStep, setActiveStep] = useState(steps[0]);
    const [steps, setSteps] = useState([
      {
        key: &quot;firstStep&quot;,
        label: &quot;My First Step&quot;,
        isDone: true,
        component: firstStep,
      },  
    ]);
    const index = steps.findIndex((x) =&gt; x.key === activeStep.key);
    setSteps((prevStep) =&gt;
      prevStep.map((x) =&gt; {
        if (x.key === activeStep.key) x.isDone = true;
        return x;
      })
    );
   
    const firstStep = () =&gt; {
      return (
        &lt;div&gt;
          &lt;div className=&quot;box&quot;&gt;
            &lt;div className=&quot;steps&quot;&gt;
              &lt;ul className=&quot;nav&quot;&gt;
                {steps.map((step, i) =&gt; {
                  return (
                    &lt;li
                      key={i}
                      className={`${
                        activeStep.key === step.key ? &quot;active&quot; : &quot;&quot;
                      } ${step.isDone ? &quot;done&quot; : &quot;&quot;}`}
                    &gt;
                      &lt;div&gt;
                        Step {i + 1}
                        &lt;br /&gt;
                        &lt;span&gt;{step.label}&lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/li&gt;
                  );
                })}
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div className=&quot;step-component&quot;&gt;{activeStep.component()}&lt;/div&gt;
            &lt;div className=&quot;btn-component&quot;&gt;
              &lt;input
                type=&quot;button&quot;
                value=&quot;Back&quot;
                onClick={handleBack}
                disabled={steps[0].key === activeStep.key}
              /&gt;
              &lt;input
                type=&quot;button&quot;
                value={
                  steps[steps.length - 1].key !== activeStep.key
                    ? &quot;Next&quot;
                    : &quot;Submit&quot;
                }
                onClick={handleNext}
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;Form className=&quot;column justify-content-center page&quot;&gt;
            &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;exampleForm.ControlTextarea1&quot;&gt;
              &lt;Form.Label&gt;Benzersiz Ad&lt;/Form.Label&gt;
              &lt;Form.Control as=&quot;textarea&quot; rows={3} /&gt;
            &lt;/Form.Group&gt;
            &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;exampleForm.ControlTextarea1&quot;&gt;
              &lt;Form.Label&gt;Görünen İsim&lt;/Form.Label&gt;
              &lt;Form.Control as=&quot;textarea&quot; rows={3} /&gt;
            &lt;/Form.Group&gt;
            &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;exampleForm.ControlTextarea1&quot;&gt;
              &lt;Form.Label&gt;Oyun Açıklaması&lt;/Form.Label&gt;
              &lt;Form.Control as=&quot;textarea&quot; rows={3} /&gt;
            &lt;/Form.Group&gt;
            &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;exampleForm.ControlTextarea1&quot;&gt;
              &lt;Form.Label&gt;Oyun Türü&lt;/Form.Label&gt;
              &lt;Form.Control as=&quot;textarea&quot; rows={3} /&gt;
            &lt;/Form.Group&gt;
            &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;exampleForm.ControlTextarea1&quot;&gt;
              &lt;Form.Label&gt;Bireysel&lt;/Form.Label&gt;
              &lt;Form.Control as=&quot;textarea&quot; rows={3} /&gt;
            &lt;/Form.Group&gt;
            &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;exampleForm.ControlTextarea1&quot;&gt;
              &lt;Form.Label&gt;Oyun Durumu&lt;/Form.Label&gt;
              &lt;Form.Control as=&quot;textarea&quot; rows={3} /&gt;
            &lt;/Form.Group&gt;
            &lt;Form.Group className=&quot;mb-3&quot; controlId=&quot;exampleForm.ControlTextarea1&quot;&gt;
              &lt;Form.Label&gt;Açık&lt;/Form.Label&gt;
              &lt;Form.Control as=&quot;textarea&quot; rows={3} /&gt;
            &lt;/Form.Group&gt;
          &lt;/Form&gt;
          &lt;Link to=&quot;/PageTwo&quot;&gt;
            &lt;Button className=&quot;button&quot; variant=&quot;outline-secondary&quot;&gt;
              İ L E R İ
            &lt;/Button&gt;{&quot; &quot;}
          &lt;/Link&gt;
        &lt;/div&gt;
      );  
    
  
    const handleNext = () =&gt; {
      if (steps[steps.length - 1].key === activeStep.key) {
        alert(&quot;You have completed all steps.&quot;);
      }
  
      setActiveStep(steps[index + 1]);
    };
  
    const handleBack = () =&gt; {
      const index = steps.findIndex((x) =&gt; x.key === activeStep.key);
      if (index === 0) return;
  
      setSteps((prevStep) =&gt;
        prevStep.map((x) =&gt; {
          if (x.key === activeStep.key) x.isDone = false;
          return x;
        })
      );
      setActiveStep(steps[index - 1]);
    };
  
    };
  }
  export default NewGame;
  </code></pre>
  <p>So when I run this code I have this error in the website:</p>
  <pre><code>    ReferenceError: Cannot access 'steps' before initialization
  NewGame
  C:/Users/SAMSUNG/Documents/src/pages/NewGame.js:6
    3 | import { Link } from &quot;react-router-dom&quot;;
    4 | import &quot;./style.css&quot;;
    5 | function NewGame() {
  &gt; 6 |   const [activeStep, setActiveStep] = useState(steps[0]);
    7 |   const [steps, setSteps] = useState([
    8 |     {
    9 |       key: &quot;firstStep&quot;,
  </code></pre>
  <p>Thank you!</p>