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

Question

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.

Answer 1

You can use useState to keep track of stuff (for example, which buttons have been clicked)

Say, null means nothing has been clicked, and then a boolean signifies the yes/no answer.

import React from "react";
import "./styles.css";

export default function App() {
  const [needMedicine, setNeedMedicine] = React.useState(null);
  const getYesBackgroundColor = () => {
    if (needMedicine === null) {
      return null;
    }

    return needMedicine ? "green" : "red";
  };

  const getNoBackgroundColor = () => {
    if (needMedicine === null) {
      return null;
    }

    return needMedicine ? "red" : "green";
  };

  return (
    <div className="fcontainer">
      <div className="fitem">
        Did You come into the pharmacy today for Medicine?
      </div>
      <div className="fitem">
        <button
          onClick={() => setNeedMedicine(false)}
          style={{ backgroundColor: getNoBackgroundColor() }}
        >
          No
        </button>
        <button
          onClick={() => setNeedMedicine(true)}
          style={{ backgroundColor: getYesBackgroundColor() }}
        >
          Yes
        </button>
      </div>
    </div>
  );
}

Also, you might want to consider using checkboxes (multiple choice), radio buttons (single choice) or switch-buttons (on/off, true/false etc) or something like that. People often like to have the type of question fit a standardised type of input controller.

Answer 2

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.