When using react, the webpage is completely blank-CodePudding

The webpage was being displayed prior to adding the firebase setDoc code. I have excluded the render tag, because when it is included I when adding in a render tag I am given an error stating "cannot be used as a JSX component. Its return type 'void' is not a valid JSX element." This code is sending an option selected by a user using a radio button to firebase. Thanks in advance.

function RoleDecision(this: any) {
  let { user } = useUser();
  let { firestore } = useFirebase();

  let onValueChange = async (e: { target: { value: any } }) => {
    this.setState({
      selectedOption: e.target.value,
    });
  };

  let formSubmit = async (e: { preventDefault: () => void }) => {
    e.preventDefault();
    console.log(this.state.selectedOption);
  };

  useEffect(() => {
    if (user && firestore) {
      (async () => {
        setDoc(doc(firestore!, "users", `${user?.uid}`), {
          role: this.state.selectedOption,
        })
          .then(() => {
            console.log("Document successfully written!");
          })
          .catch((error) => {
            console.error("Error writing document: ", error);
          });
      })();
    }
  }, [firestore]);

  return(

    <form onSubmit={this.formSubmit}>
      <li>
        Coach
        <input
          className="authenticate-form-input"
          type="radio"
          value="coach"
          name="role"
          checked={this.state.selectedOption === "coach"}
          onChange={this.onValueChange}
        />
      </li>
      <br />
      <li>
        Manager
        <input
          className="authenticate-form-input"
          type="radio"
          value="manager"
          name="role"
          checked={this.state.selectedOption === "manager"}
          onChange={this.onValueChange}
        />
      </li>
      <br />
      <li>
        Admin
        <input
          className="authenticate-form-input"
          type="radio"
          value="admin"
          name="role"
          checked={this.state.selectedOption === "admin"}
          onChange={this.onValueChange}
        />
      </li>
      <br />
      <li>
        <button className="role-submit-button" type="submit">
          <a href="././routes/home/Home.tsx">Submit Role</a>
        </button>
      </li>
    </form>
  );
}

export default RoleDecision;

CodePudding user response：

You can not use React class based and function based components simultaneously in the same file/component!

My suggestion is to use function based only components, and to replace the this.state usage with useState() hook, the onSubmit and onChange events with proper handler functions like, const onValueChange = (...) => {...}