Changing state on route change in React

Question

I want to show a select tag when a checkbox is checked. In "/register" route (which is the default route), checkbox should be unchecked by default and in "/register/tradeUser", checkbox should be checked by default. If I use defaultChecked="true", the state of checked will not change to true. So I want to know, how can I call setChecked(true) inside the conditional rendering?

const Register = (match) => {
  const [checked, setChecked] = useState(false);

  const toggleChecked = () => {
    if (checked) {
      setChecked(false);
    } else {
      setChecked(true);
    }
  };

  return (
      <form>
        <input type="text" name="first-name" placeholder="First Name" />
        <input type="text" name="last-name" placeholder="Last Name" />
        <input type="email" name="email" placeholder="Email Address" />
        <input type="password" name="password" placeholder="Password" />
        <input type="password" name="confirm" placeholder="Confirm Password" />
        {match.location.pathname === "/register/tradeUser" ? (
          <div>
            <label>
              <input
                type="checkbox"
                name="profession"
                checked={checked}
                onChange={() => toggleChecked()}
              />
              I am an Architect/Interior designer
            </label>
            <select
              name="info"
              placeholder="Select Option to add Architect Info"
              className={`${checked ? "" : "hidden"}`}
            >
              <option value="certi-number">Certificate Number</option>
              <option value="certificate">Registration Certificate</option>
            </select>
          </div>
        ) : (
          <div>
            <label>
              <input
                type="checkbox"
                name="profession"
                checked={checked}
                onChange={() => toggleChecked()}
              />
              I am an Architect/Interior designer
            </label>
            <select
              name="info"
              placeholder="Select Option to add Architect Info"
              className={`${checked ? "" : "hidden"}`}
            >
              <option value="certi-number">Certificate Number</option>
              <option value="certificate">Registration Certificate</option>
            </select>
          </div>
        )}
        <button>Register</button>
      </form>
      <label>
        Existing User?
        <Link to="/login" className="link">
          {" Login "}
        </Link>
      </label>
    </div>
  );
};

Answer 1

you can easily run function in jsx like this

export default function App() {
  return (
    <div className="App">
      {console.log(1)}
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

however you shouldn't set state in jsx because it will loop infinitely

in this case you can use useEffect

useEffect(()=>{
   if(match.location.pathname=== "/register/tradeUser"){
      setChecked(true)
   }else{
      setChecked(false)
   }
},[match.location.pathname])