Usama

Posted on Oct 22

# ⚛️ React Mini Project: Making the Step Progress Component Dynamic with useState (Part 2)

#react #javascript #webdev #frontend

Yesterday, I built a simple static Step Progress Component in React.
Today, I upgraded it — by learning and implementing one of the most important concepts in React: State 🧠.

This was a small step… but it made the UI come alive 🚀

🧠 What is State?

Before we jump into code, let’s understand what state really is.

State is basically the data that a component can hold over time.
It acts like the “memory” of a component.
Whenever the state changes, React re-renders the component to reflect the new UI.

Think of it like this:

🧠 “State remembers things for the component between renders.”

💡 Why State Matters

✅ It lets us update the view dynamically when data changes.
🔁 It persists local variables between renders.
🧩 It keeps our UI in sync with the underlying data.

Example: In my step progress component, the current step is stored as state.
When I click Next or Previous, the UI updates instantly.

⚙️ Step 1: Importing and Using useState

React gives us a built-in Hook to use state in functional components — useState.

import { useState } from "react";

Then inside the component, I created a state variable like this:

const [step, setStep] = useState(1);

Here’s what happens:

step → the actual state value (initially 1)
setStep → the function used to update that value
useState(1) → sets the initial value to 1

Every time I call setStep(newValue), React re-renders the component with the new step.

🧭 Step 2: Updating the State

I added logic to make the buttons actually work.

function handlePrevious() {
  if (step > 1) {
    setStep(step - 1);
  }
}

function handleNext() {
  if (step < 3) {
    setStep(step + 1);
  }
}

When setStep is called:

The value of step changes
The UI updates immediately
The active number and message change visually

🧩 Step 3: Full Component Code

Here’s my full working component now 👇

import { useState } from "react";

const messages = [
  "Learn React ⚛️",
  "Apply for jobs 💼",
  "Invest your new income 🤑",
];

function App() {
  const [step, setStep] = useState(1);

  function handlePrevious() {
    if (step > 1) {
      setStep(step - 1);
    }
  }

  function handleNext() {
    if (step < 3) {
      setStep(step + 1);
    }
  }

  return (
    <div className="steps">
      <div className="numbers">
        <div className={step >= 1 ? "active" : ""}>1</div>
        <div className={step >= 2 ? "active" : ""}>2</div>
        <div className={step >= 3 ? "active" : ""}>3</div>
      </div>

      <p className="message">
        Step {step}: {messages[step - 1]}
      </p>

      <div className="buttons">
        <button
          style={{ backgroundColor: "#7950f2", color: "#fff" }}
          className="btn"
          onClick={handlePrevious}
        >
          Previous
        </button>
        <button
          style={{ backgroundColor: "#7950f2", color: "#fff" }}
          className="btn"
          onClick={handleNext}
        >
          Next
        </button>
      </div>
    </div>
  );
}

export default App;

🪄 How It Works

When the page loads, step is set to 1.
Clicking Next updates the state and UI shows Step 2.
Clicking Previous brings it back to Step 1.
React remembers the value of step between re-renders.
We no longer rely on hardcoded values — it’s fully dynamic!

⚠️ Quick Tip — Don’t Mutate State Directly!

Never update state like this ❌:

// ❌ Bad practice
step = step + 1;

Always use the setter function ✅:

setStep(step + 1);

This is how React knows something changed and triggers a re-render.

🏁 Final Thoughts

Today I learned how powerful useState can be in React.
This small hook allows components to remember information, making them truly interactive.

✅ State = Component Memory 🧠
✅ State Change = UI Update ⚡

DEV Community