App.js

import { useState } from "react";
import Parse from 'parse';
import './App.css'

Parse.initialize(process.env.PARSE_APP_ID,process.env.PARSE_JS_KEY); 
Parse.serverURL = 'https://parseapi.back4app.com/';

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="App">
      <header className="app-header">
      <img className="logo" alt="back4app's logo" src={'https://blog.back4app.com/wp-content/uploads/2019/05/back4app-white-logo-500px.png'} />
        <h2 className="spacing">React on Back4App</h2>
        <span>Employees list</span>
      </header>
      <main>
        <h1>Create a employee </h1>
        <div className="form">
          <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
          className="button-container"
        >
          <button className="action-button create" onClick={createEmployee}>create employee</button>
          <button className="action-button" onClick={getEmployees}> list created employees</button>
        </div>
        <div className="employees-container">
        <h2>employees</h2>
        <ul>
          {employees.map(({ name }) => (
            <li key={name}>
                {name}
            </li>
          ))}
        </ul>
        </div>
      </main>
    </div>
  );
}