How to change different background color of two buttons on single click in reactjs?

There are some objective questions whose answers are "YES" or "NO"

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.

<div className="fcontainer">
    <div className="fitem">
    Did You come into the pharmacy today for Medicine?
    </div>
    <div className="fitem">
     <button> No</button>
     <button>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="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
            <div className="fcontainer">
              <div className="fitem ques">What are yours symptoms?</div>
              <div className="fitem">
                <button className="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
            <div className="fcontainer">
              <div className="fitem ques">
                How long you had the symptoms?
              </div>
              <div className="fitem">
                <button className="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
            <div className="fcontainer">
              <div className="fitem ques">
                What action have you already taken?
              </div>
              <div className="fitem">
                <button className="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
            <div className="fcontainer">
              <div className="fitem ques">
                Are you taking any other medication?
              </div>
              <div className="fitem">
                <button className="butn">No</button>
                <button className="butn">Yes</button>
              </div>
            </div>
          </div>
        </div>

this is outputscreen:

I am new to React, in a learning phase, and need your help.

Thank you.

Solution

You can create a state with an empty string initially and once you click the button update the state with yes or no and use that state inside your return.

In the below example I added style properties, you can change this with class as well with the same logic.

import { useState } from "react";

const App = () => {
  const [selectedButton, setSelectedButton] = useState("");
  return (
    <>
      <button style={selectedButton !== "" ? { backgroundColor: selectedButton === "yes" ? "green" : "red"} : { backgroundColor: "grey"}} onClick={() => setSelectedButton("yes")}>Yes</button>
      <button style={selectedButton !== "" ? { backgroundColor: selectedButton === "no" ? "green" : "red"} : { backgroundColor: "grey" }} onClick={() => setSelectedButton("no")}>No</button>
    </>
  )
}

export default App;

if the state is empty then fill grey colour, if there is a value fill different colour based on your condition.

Suggestion: it's always better to use class instead styles.