ReactJS: Button Enable disable with change color

Question

here I have a problem related to making the disable and enable button logic functions.

So, when the user selects the menu in the select option, the button that was originally disabled becomes enable and the color of the button changes too.

how to create such a function? Thanks.

before choosing, the button is disabled.

User selects menu.

The user after selecting the menu, the button changes to enable and the button color also changes.

My Code =

const ButtonModal = () => {
  const [openModal, setOpenModal] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);

  const handleModal = () => setOpenModal(!openModal);

  return (
    <>
      <button
        onClick={handleModal}
        className="bg-merah text-white font-bold text-sm rounded-2xl w-48 h-10 py-2 mb-6"
      >
        Perbarui Kompetitor
      </button>
      <Modal
        center
        open={openModal}
        onClose={handleModal}
        showCloseIcon={false}
      >
        <section className="grid justify-items-end">
          <AiOutlineClose
            size={20}
            onClick={handleModal}
            className="cursor-pointer"
          />
        </section>
        <div className="flex items-center justify-center mb-4">
          <section className="inline-flex gap-2">
            <p className="font-bold text-center">Pembaruan Data Kompetitor</p>
          </section>
        </div>
        <p>
          Tambah data dengan memilih nama kompetitor yang tersedia atau masukkan
          data baru.
        </p>
        <p className="font-bold mt-6">Nama Kompetitor</p>
        <div class="flex justify-center">
          <div class="mb-3 w-600 mr-6 mt-2">
            <select
              onChange={(e) => setSelectedOption(e.target.value)}
              class="form-select appearance-none
      block
      w-full
      px-3
      py-1.5
      mb-1
      text-base
      font-normal
      text-gray-700
      bg-white bg-clip-padding bg-no-repeat
      border border-solid border-gray-300
      rounded
      transition
      ease-in-out
      m-0
      focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
              aria-label="Default select example"
            >
              <option selected>Pilih nama kompetitor</option>
              <option value="biznet">Biznet</option>
              <option value="cbn">CBN</option>
              <option value="first_media">First Media</option>
              <option value="iconet">Iconet</option>
              <option value="oxygen">Oxygen</option>
              <option value="my_republik">My Republik</option>
              <option value="other">Lainnya</option>
            </select>
          </div>
        </div>

        {selectedOption === "other" && (
          <div class="mb-6">
            <input
              class="w-[37.5rem] bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="Masukan nama kompetitor..."
              required
            />
          </div>
        )}

        <div className="flex items-center justify-center">
          <button
            onClick={handleModal}
            type="button"
            class="inline-block px-6 py-2 border-2 border-red-600 text-red-600 font-medium text-xs leading-tight rounded hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out"
          >
            Kembali
          </button>
          
          <button
            type="button"
            class="inline-block ml-6 px-6 py-2.5 bg-gray-200 text-gray-700 font-medium text-xs leading-tight rounded shadow-md hover:bg-gray-300 hover:shadow-lg focus:bg-gray-300 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-400 active:shadow-lg transition duration-150 ease-in-out"
            disabled
          >
            Lanjutkan
          </button>
        </div>
      </Modal>
    </>
  );
};

Answer 1

Bind the button's disabled attribute to the selectedOption state - is this what you're after?

And do the same for changing colour, using a ternary to set the value.

<button
  onClick={handleModal}
  disabled={!selectedOption}
  style={{ background: selectedOption ? 'red': 'transparent' }}
  className="bg-merah text-white font-bold text-sm rounded-2xl w-48 h-10 py-2 mb-6"
/>

EDIT: I think I saw you mention in a comment that it's the other button. Just set them on the other button then. Also edited to bind to the more appropriate state selectedOption.

disabled={!selectedOption}
style={{ background: selectedOption ? 'red': 'transparent' }}