Front-end Challenge

gistfile1.txt

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

//
// To reviewer: Note I have not worked with react before.  I have submitted what I 
// have completed to move forward with the exercise.  It looks like I'm stuck on
// passing the data between the siblings.  Thanks for reviewing.
//

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({ addEntryToPhoneBook }) {
  const [inputs, setInputs] = useState({
    userFirstname: "Coder",
    userLastname: "Byte",
    userPhone: "8885559999",
  })
  ;

  const handleChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(inputs.userFirstname, inputs.userLastname, inputs.userPhone);
    addEntryToPhoneBook = inputs;
  }

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

function InformationTable(props) {
  console.log("props", props.inputs);
  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>
      </thead> 
      <tr>
        <td>inputs.userFirstname</td>
        <td>inputs.userLastname</td>
        <td>inputs.userPhone</td>
      </tr>
    </table>
  );
}

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

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