ReactJS: Button Enable disable with change color - reactjs

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' }}