index.js

import { useState } from "react";
import styles from "../styles/Home.module.css";
import Parse from "../service/parse";

export default function Home() {
  const [employeeName, setEmployeeName] = useState("");
  const [employeeEmail, setEmployeeEmail] = useState("");
  const [employeePassword, setEmployeePassword] = useState("");

  const [employees, setEmployees] = useState([]);

  const createEmployee = () => {
    const employee = new Parse.Object('Employee');
    employee
      .save({
        username: employeeName,
        email: employeeEmail,
        password: employeePassword,
      })
      .then(function (response) {
        setEmployeeName('');
        setEmployeeEmail('');
        setEmployeePassword('');
        alert(
          "New object create with success! ObjectId: " +
            response.id +
            ", " +
            employee.get("username")
        );
      })
      .catch(function (error) {
        alert("Error: " + error.message);
      });
  };

  const getEmployees = async () => {
    const query = new Parse.Query("Employee");
    const res = await query.findAll();
    const employees = res.map((employee) => ({ name: employee.get("username") }));

    setEmployees(employees);
  };
  return (
    <div className={styles.container}>
      <section style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            flexDirection: 'column'
          }}>
        <h1>Create a employee </h1>
        <div>
          <input
            placeholder="name"
            onChange={(e) => setEmployeeName(e.target.value)}
            value={employeeName}
          />
          <input
            placeholder="email"
            onChange={(e) => setEmployeeEmail(e.target.value)}
            value={employeeEmail}
          />
          <input
            placeholder="password"
            onChange={(e) => setEmployeePassword(e.target.value)}
            value={employeePassword}
            type="password"
          />
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            marginTop: 20,
          }}
        >
          <button onClick={createEmployee}>create employee</button>
          <button onClick={getEmployees}> list created employees</button>
        </div>
      </section>
      <section>
        <h2>employees</h2>
        <ul>
          {employees.map(({ name }) => (
            <li key={name}>{name}</li>
          ))}
        </ul>
      </section>
    </div>
  );
}