Frontend Mentor | Federico Nicoletti's profile

@elic4vet

Submitted about 1 year ago

I have a problem with the buttons, i cannot select just only one although i used useState and other methods. Once clicked every button is selected. Could you please help me ?

Rating app

Federico Nicoletti• 0

@FedeNicoletti

Posted about 1 year ago

Hi! It looks like the issue is with the isActive state. Currently, you are using a single isActive state for all buttons, which means that when you click on any button, all buttons will be toggled to the same state. To fix this, you need to have a separate state for each button to keep track of its selected status. Maybe you can try something like this:

import React, { useState } from "react";
import icon from "../assets/images/icon-star.svg";
import img from ".././assets/images/illustration-thank-you.svg";
import "../App.css";

const Rating = () => {
  const [selectedNumber, setSelectedNumber] = useState(0);
  const [success, setSuccess] = useState(false);

  const handleClick = (numberSelected) => {
    setSelectedNumber(numberSelected);
  };

  const handleSubmit = () => {
    if (selectedNumber === 0) {
      alert("Please select a rating!");
    } else {
      setSuccess(true);
    }
  };

  const ratingButtons = Array.from({ length: 5 }, (_, index) => index + 1);

  let successComponent = null;
  if (success) {
    successComponent = (
      <div>
        <img src={img} alt="Success" />
        <p className="result">You selected {selectedNumber} out of 5</p>
        <h1>Thank you!</h1>
        <p>
          We appreciate you taking the time to give a rating. If you ever need
          more support, don't hesitate to get in touch!
        </p>
      </div>
    );
  }

  return (
    <div className="container">
      <div className="card">
        <div className="successComponent">{successComponent}</div>
        <div className="rating_app">
          <img src={icon} className="icon" alt="icon" />

          <h1>How did we do?</h1>
          <p>
            Please let us know how we did with your support request. All
            feedback is appreciated to help us improve our offering!
          </p>

          <p className="results"></p>
          <div className="ratings">
            {ratingButtons.map((number) => (
              <div className="circle" key={number}>
                <button
                  className={selectedNumber === number ? "selected" : ""}
                  onClick={() => handleClick(number)}
                  value={number}
                >
                  {number}
                </button>
              </div>
            ))}
          </div>
        </div>
        <button className="submit-btn" onClick={handleSubmit}>
          Submit
        </button>
      </div>

      <div className="attribution">
        Challenge by{" "}
        <a
          href="https://www.frontendmentor.io?ref=challenge"
          target="_blank"
          rel="noreferrer"
        >
          Frontend Mentor
        </a>{" "}
        Coded by{" "}
        <a href="https://www.linkedin.com/in/eerkekoglou/">Elisabeth Erkekoglou</a>
      </div>
    </div>
  );
};

export default Rating;

Federico Nicoletti

All comments

Rating app

QR Code Components with HTML/CSS