Work with inputs/form in React

Hi, this code have the way to save the user data in local state through React.

Table.jsx

/* eslint-disable no-restricted-globals */
// Dependencies
import { useEffect, useState } from "react";
import { useMutation } from "@apollo/client";

// GraphQL
import { useQuery } from "@apollo/client";
import { LOAD_GUESTS } from "../../GraphQL/Queries/queries";
import { DELETE_GUEST } from "../../GraphQL/Mutations/Mutations";
import { UPDATE_GUEST } from "../../GraphQL/Mutations/Mutations";

// Components
import Guest from "../shared/Guest/Guest";

// Styles
import "./Table.css";

function Table() {
  // Query to get guests
  const [guests, setGuests] = useState([]);
  const { data } = useQuery(LOAD_GUESTS);

  // Mutation to delete
  const [deleteGuest, { error: deleteError }] = useMutation(DELETE_GUEST, {
    refetchQueries: [{ query: LOAD_GUESTS }],
  });

  const deleteUser = (id) => {
    deleteGuest({
      variables: {
        id: id,
      },
    });

    if (deleteError) {
      console.log(deleteError);
    }
  };

  // Mutation to update
  const [updateGuest, { error: updateError }] = useMutation(UPDATE_GUEST, {
    refetchQueries: [{ query: LOAD_GUESTS }],
  });

  const updateUser = (values) => {
    updateGuest({
      variables: {
        id: values.id,
        name: values.name,
        email: values.email,
        phone: values.phone,
      },
    });

    if (updateError) {
      console.log(updateError);
    }
  };

  useEffect(() => {
    if (data) {
      setGuests(data.sanpanchoguests.values);
    }
  }, [data]);

  if (guests.length === 0) {
    return null;
  }

  return (
    <table className="Table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Phone</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {guests.length > 0 &&
          guests.map((guest, i) => {
            return (
              <tr key={i}>
                <Guest
                  {...guest}
                  deleteGuest={deleteUser}
                  updateGuest={updateUser}
                />
              </tr>
            );
          })}
      </tbody>
    </table>
  );
}

export default Table;

Guest.jsx

/* eslint-disable react-hooks/exhaustive-deps */
// Dependencies
import * as React from "react";
import { useState, useEffect } from "react";

// Styles
import "./../../Table/Table.css";

// Components
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";

const Guest = ({ id, name, email, phone, deleteGuest, updateGuest }) => {
  const [values, setValues] = useState({
    id,
    name,
    email,
    phone,
  });

  useEffect(() => {
    const newValues = {
      id,
      name,
      email,
      phone,
    };

    const areEqual = JSON.stringify(values) === JSON.stringify(newValues);

    if (!areEqual) {
      setValues(newValues);
    }
  }, [id, name, email, phone]);

  const [valueInFocus, setValueInFocus] = useState("");

  const handleEdit = () => {
    setValueInFocus("");
    updateGuest(values);
  };

  const renderTextFieldOrTypo = (name, value) => {
    if (valueInFocus === name) {
      return (
        <TextField
          autoFocus
          value={value}
          onChange={(e) =>
            setValues({
              ...values,
              [name]: e.target.value,
            })
          }
          onBlur={() => handleEdit()}
        />
      );
    }
    return (
      <td>
        <Typography
          onClick={() => {
            setValueInFocus(name);
          }}
        >
          {value}
        </Typography>
      </td>
    );
  };

  return (
    <>
      {renderTextFieldOrTypo("name", values.name)}
      {renderTextFieldOrTypo("email", values.email)}
      {renderTextFieldOrTypo("phone", values.phone)}

      <td>
        <i
          className="fa-regular fa-trash-can"
          onClick={() => deleteGuest(values.id)}
        ></i>
      </td>
    </>
  );
};

export default Guest;

By Cristina Rojas