React Hooks and Context Basics

import React, { useState, createContext, useContext } from 'react';
import ReactDOM from 'react-dom';

// useForm
const useForm = (callback) => {
  const [formValues, setFormValues] = useState([]);
  const [loading, setLoading] = useState(false);

  const handleChange = (event) => {
    const auxValues = { ...formValues };
    auxValues[event.target.name] = event.target.value;
    setFormValues(auxValues);
  }

  const handleSubmit = callback => event => {
    event.preventDefault();
    setLoading(true);
    callback();
    setFormValues({});
    setLoading(false);
  }

  return [{ formValues, loading}, handleChange, handleSubmit];
}


// Context
const PhoneBookContext = createContext();

const PhoneBookProvider = props => {
  const [values, setValues] = useState([
    {
      userFirstname: "Coder",
      userLastname: "Byte",
      userPhone: "8885559999"
    }
  ]);
  return (
    <PhoneBookContext.Provider value={[values, setValues]}>
      {props.children}
    </PhoneBookContext.Provider>
  )
}

// Components
const style = {
  table: {
    borderCollapse: 'collapse'
  },
  tableCell: {
    border: '1px solid gray',
    margin: 0,
    padding: '5px 10px',
    width: 'max-content',
    minWidth: '150px'
  },
  form: {
    container: {
      padding: '20px',
      border: '1px solid #F0F8FF',
      borderRadius: '15px',
      width: 'max-content',
      marginBottom: '40px'
    },
    inputs: {
      marginBottom: '5px'
    },
    submitBtn: {
      marginTop: '10px',
      padding: '10px 15px',
      border:'none',
      backgroundColor: 'lightseagreen',
      fontSize: '14px',
      borderRadius: '5px'
    }
  }
}

function PhoneBookForm() {  
  const [{ formValues, loading}, handleChange, handleSubmit] = useForm();
  const [values, setValues] = useContext(PhoneBookContext);

  const doSubmit = () => {    
    setValues([...values, 
    {
      userFirstname: formValues.userFirstname,
      userLastname: formValues.userLastname,
      userPhone: formValues.userPhone
    }]);    
  }

  return (
    <div>
      <form onSubmit={handleSubmit(doSubmit)} style={style.form.container}>
        <label>First name:</label>
        <br />
        <input 
          style={style.form.inputs}
          className='userFirstname'
          name='userFirstname' 
          type='text'        
          onChange={handleChange}
        />
        <br/>
        <label>Last name:</label>
        <br />
        <input 
          style={style.form.inputs}
          className='userLastname'
          name='userLastname' 
          type='text'
          onChange={handleChange}
        />
        <br />
        <label>Phone:</label>
        <br />
        <input
          style={style.form.inputs}
          className='userPhone' 
          name='userPhone' 
          type='text'
          onChange={handleChange}
        />
        <br/>
        <input 
          style={style.form.submitBtn} 
          className='submitButton'
          type='submit' 
          value={ loading ? "Loading..." : "Add User" }
        /> 
      </form>      
    </div>
  )
}

function InformationTable(props) {
  const [values, setValues] = useContext(PhoneBookContext);  

  return (
    <table style={style.table} className='informationTable'>
      <thead> 
        <tr>
          <th style={style.tableCell}>First name</th>
          <th style={style.tableCell}>Last name</th>
          <th style={style.tableCell}>Phone</th>
        </tr>       
        {values.map((value, index) => (
          <tr key={index}>
            <th style={style.tableCell}>{value.userFirstname}</th>
            <th style={style.tableCell}>{value.userLastname}</th>
            <th style={style.tableCell}>{value.userPhone}</th>
          </tr>
        ))}
        
      </thead> 
    </table>
  );
}

function Application(props) {
  return (
    <section>
      <PhoneBookProvider>
        <PhoneBookForm />
        <InformationTable/>
      </PhoneBookProvider>
    </section>
  );
}

ReactDOM.render(
  <Application />,
  document.getElementById('root')
);