How to handle state with mutliple buttons and multiple value in reactjs

Question

I have created one task in which we can select yes or no option

• I have two buttons YES and NO.
• If I click on YES button then yes button's background color turn green and NO button's background color turn red.
• If I click on NO button then no button's background color turn green and YES button's background color turn red.
• This means the clicked button turn green and the un-clicked button turn red with single click.

but the problem is I have created seperate state for each buttons which is not good practice.

Is there any another way to handle this?

Here is my code `

import React, { useState } from "react";
import "./Medicine.css";

const Medicine = () => {
  const [selectedButton, setSelectedButton] = useState("");
  const [selectedButton1, setSelectedButton1] = useState("");
  const [selectedButton2, setSelectedButton2] = useState("");
  const [selectedButton3, setSelectedButton3] = useState("");
  const [selectedButton4, setSelectedButton4] = useState("");
  const [selectedButton5, setSelectedButton5] = useState("");
  return (
    <>
      <h1>Medicine</h1>
      <div className="parent_div">
        <div className="child_div">
          <p>page2</p>
          <div className="grand_div">
            <div className="fcontainer">
              <div className="fitem">
                Did You come into the pharmacy today for Medicine?
              </div>
              <div className="fitem">
                <button
                  className={
                    selectedButton !== ""
                      ? selectedButton === "no"
                        ? "butn greenbtn"
                        : "butn redbtn"
                      : "butn"
                  }
                  onClick={() => setSelectedButton("no")}
                >
                  No
                </button>
                <button
                  className={
                    selectedButton !== ""
                      ? selectedButton === "yes"
                        ? "butn greenbtn"
                        : "butn redbtn"
                      : "butn"
                  }
                  onClick={() => setSelectedButton("yes")}
                >
                  Yes
                </button>
              </div>
            </div>

            <hr />
            <div>
              <h5>Where do you asked any of the following:</h5>
              <div style={{ marginTop: "10px" }}>
                <div className="fcontainer">
                  <div className="fitem ques">Who is the Medicine for?</div>
                  <div className="fitem ">
                    <button
                      className={
                        selectedButton1 !== ""
                          ? selectedButton1 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton1("no")}
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton1 !== ""
                          ? selectedButton1 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton1("yes")}
                    >
                      Yes
                    </button>
                  </div>
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">What are yours symptoms?</div>
                  <div className="fitem">
                    <button
                      className={
                        selectedButton2 !== ""
                          ? selectedButton2 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton2("no")}
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton2 !== ""
                          ? selectedButton2 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton2("yes")}
                    >
                      Yes
                    </button>
                  </div>
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    How long you had the symptoms?
                  </div>
                  <div className="fitem">
                    <button
                      className={
                        selectedButton3 !== ""
                          ? selectedButton3 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton3("no")}
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton3 !== ""
                          ? selectedButton3 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton3("yes")}
                    >
                      Yes
                    </button>
                  </div>
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    What action have you already taken?
                  </div>
                  <div className="fitem">
                    <button
                      className={
                        selectedButton4 !== ""
                          ? selectedButton4 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton4("no")}
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton4 !== ""
                          ? selectedButton4 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton4("yes")}
                    >
                      Yes
                    </button>
                  </div>
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    Are you taking any other medication?
                  </div>
                  <div className="fitem">
                    <button
                      className={
                        selectedButton5 !== ""
                          ? selectedButton5 === "no"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton5("no")}
                    >
                      No
                    </button>
                    <button
                      className={
                        selectedButton5 !== ""
                          ? selectedButton5 === "yes"
                            ? "butn greenbtn"
                            : "butn redbtn"
                          : "butn"
                      }
                      onClick={() => setSelectedButton5("yes")}
                    >
                      Yes
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Medicine;

` here is the output screen-- How to write small and efficient code.

Answer 1

You can create a seprate component for buttons group:

Button.js

import React, { useState } from "react";
import "./Medicine.css";

const Button = () => {
  const [selectedButton, setSelectedButton] = useState("");

  return (
    <div className="fitem">
      <button
        className={
          selectedButton !== ""
            ? selectedButton === "no"
              ? "butn greenbtn"
              : "butn redbtn"
            : "butn"
        }
        onClick={() => setSelectedButton("no")}
      >
        No
      </button>
      <button
        className={
          selectedButton !== ""
            ? selectedButton === "yes"
              ? "butn greenbtn"
              : "butn redbtn"
            : "butn"
        }
        onClick={() => setSelectedButton("yes")}
      >
        Yes
      </button>
    </div>
  );
};
export default Button;

then you can import and use that Button component:
Medicine.js

import React from "react";
import Button from "./Button";
import "./Medicine.css";

const Medicine = () => {
  return (
    <>
      <h1>Medicine</h1>
      <div className="parent_div">
        <div className="child_div">
          <p>page2</p>
          <div className="grand_div">
            <div className="fcontainer">
              <div className="fitem">
                Did You come into the pharmacy today for Medicine?
              </div>
              <Button />
            </div>

            <hr />
            <div>
              <h5>Where do you asked any of the following:</h5>
              <div style={{ marginTop: "10px" }}>
                <div className="fcontainer">
                  <div className="fitem ques">Who is the Medicine for?</div>
                  <Button />
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">What are yours symptoms?</div>
                  <Button />
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    How long you had the symptoms?
                  </div>
                  <Button />
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    What action have you already taken?
                  </div>
                  <Button />
                </div>
                <div className="fcontainer">
                  <div className="fitem ques">
                    Are you taking any other medication?
                  </div>
                  <Button />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Medicine;