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

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>

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

Thank you.

CodePudding user response：

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.

CodePudding user response：

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.