How to manage component state in a Music Shop Application

Question

With the help of programming can you tell me How to manage component state in a Music Shop Application?

Answer 1

You can manage component state in a Music Shop App using React’s built-in state management or external libraries depending on the complexity.

1. Using useState (for local component state)

Example: Manage selected product and cart count.

import { useState } from 'react';

function MusicProduct() {

  const [inCart, setInCart] = useState(false);

  const handleAddToCart = () => {

    setInCart(true);

  };

  return (

    <div>

      <p>Guitar - $500</p>

      <button onClick={handleAddToCart} disabled={inCart}>

        {inCart ? 'Added' : 'Add to Cart'}

      </button>

    </div>

  );

}