Toggling options not working with useState correctly

Question

I have the following component:

import React, {
    Fragment,
    useState
} from "react";
import PropTypes from "prop-types";
import {
    connect
} from "react-redux";

import {
    Link,
    withRouter
} from "react-router-dom";

const ChooseRole = () => {
    //   const [role, setRole] = useState({
    //     business: false,
    //     jobSeeker: false
    //   });

    const [business, toggleBusiness] = useState(false);
    const [jobSeeker, toggleJobSeeker] = useState(false);

    const onClick = (e, roleType) => {
        switch (roleType) {
            case "business":
                toggleBusiness(!business);

                if (business === true) {
                    toggleJobSeeker({
                        jobSeeker: false
                    });
                }
                break;

            case "jobSeeker":
                toggleJobSeeker(!jobSeeker);

                if (jobSeeker === true) {
                    toggleBusiness({
                        business: false
                    });
                }
                break;
        }
    };
 return (
      <Fragment>
           <h1>First thing's first</h1>
           <h3 className="mt-4">I'm a...</h3>
           <h3
           name="business"
           className={business === true ? "text-primary" : ""}
           style={{ cursor: "pointer" }}
           onClick={e => onClick(e, "business")}
           >
           Business
           </h3>
           <h3
           name="jobSeeker"
           className={jobSeeker === true ? "text-primary" : ""}
           style={{ cursor: "pointer" }}
           onClick={e => onClick(e, "jobSeeker")}
           >
           Talent
           </h3>
      </Fragment>
 );

When I click on either h3 element that is rendered, the className is not being added correctly. Upon clicking on, say, business -- the text of that h3 should turn orange. Clicking on it again should turn it back to black. If the text business is orange, clicking Talent should turn the text of Talent orange, and the text of Business into black. But for some reason, clicking on Business and then on Talent turns both of them orange. Clicking again on either turns both of them back to black. Im not sure what I'm doing wrong here, do I have a logic error somewhere?

Answer 1

Your issue is you are setting objects instead of boolean values in your state. Also you need to reference the correct variable. Instead of checking if business is true and turning jobseeker to false.. just check if jobseeker is true when in the business switch

switch (roleType) {
  case "business":
    toggleBusiness(!business);

    if (jobSeeker === true) {
      toggleJobSeeker(false);
    }
    break;

  case "jobSeeker":
    toggleJobSeeker(!jobSeeker);

    if (business === true) {
      toggleBusiness(false);
    }
    break;
}

See it in action!