Die Beispiele sollen lediglich den Umgang mit User Aktionen wie einem Klick auf einen Button zeigen. Typische Namenskonventionen sind handleClick, handleOnChange, clickHandler.

Beispiel User Authentifizierung

export const user = {
  email: '',
  password: '',
  loggedIn: false,
};

function App() {

  function handleClick(){
    user.email = 'test@email.de';
    user.password = 'TopSecret';
    user.loggedIn = true;
    console.log(user);
  }

  return (
    <div id="app">
      <h1>User Login</h1>
      <p>
        <label>Email</label>
        <input type="email" />
      </p>

      <p>
        <label>Password</label>
        <input type="password" />
      </p>

      <p id="actions">
        <button onClick={handleClick}>Login</button>
      </p>
    </div>
  );
}

export default App;

Beispiel Erstellung User (Übergabe eines Wertes an Funktion)

function App() {
  function handleCreateUser1(name) {
    user.name = name;
    console.log(user.name);
  }

  const handleCreateUser = (name) => {
   console.log("Test")
  }
  return (
    <div id="app">
      <h1>User Login</h1>
      <p>
        <label>Name</label>
        {/* You don't need to do anything with this input! You'll learn how to handle user input later */}
        <input type="text" />
      </p>

      <p id="actions">
      {/* 
      handleCreateUser("Max Mustermann") will call when rendering, so not only when on onClick
      */}
        <button onClick={()=> handleCreateUser("Max Mustermann")}>Create User</button>
      </p>
    </div>
  );
}