How to submit the form so that it is displayed in the table?

Question

I created a form at the top that allows the user to enter in a first name, last name, and phone number and submit button.

Once the submit button is pressed, the information should be displayed in a table below (automatically sorted by last name) along with all the previous information that was entered.

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

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 }) {
  return (
    <form onSubmit={ e => { e.preventDefault() }} style={style.form.container}>
      <label>First name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userFirstname'
        name='userFirstname' 
        type='text'
        value='Coder'
      />
      <br/>
      <label>Last name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userLastname'
        name='userLastname' 
        type='text'
        value='Byte'
      />
      <br />
      <label>Phone:</label>
      <br />
      <input
        style={style.form.inputs}
        className='userPhone' 
        name='userPhone' 
        type='text'
        value='8885559999'
      />
      <br/>
      <input 
        style={style.form.submitBtn} 
        className='submitButton'
        type='submit' 
        value='Add User' 
      />
    </form>
  )
}

function InformationTable(props) {
  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> 
    </table>
  );
}

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

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

Answer 1

// .....
// .....
// You should have a state where you can store the value of the form to pass it 
// to the other component
// I just summarize the code.

function PhoneBookForm(props) {
  const [firstname, setFirstname] = useState('');
  // const [lastname, setLastname] = useState('');
  submitForm(){
    // you can do other things about the values of state
    props.saveFn({ firstname : firstname });
  }
  return (
    <form onSubmit={ e => { e.preventDefault() }} style={style.form.container}>
      <label>First name:</label>
      <br />
      <input 
        style={style.form.inputs}
        className='userFirstname'
        name='userFirstname' 
        type='text'
        onChange={e => setFirstname(e.target.value)}
        value={firstname}
      />
      <br/>
      <input 
        style={style.form.submitBtn} 
        className='submitButton'
        type='submit' 
        value='Add User' 
        onClick={ submitForm }
      />
    </form>
  )
}

function InformationTable(props) {
  
  return (
    <table style={style.table} className='informationTable'>
      <thead> 
        <tr>
          <th style={style.tableCell}>First name</th>
        </tr>
        {
           props.Items.map((item,idx) =>  <tr style={style.tableCell} key={idx}> <td>{item.firstname} </td></tr>)
        }
        
      </thead> 
    </table>
  );
}

function Application(props) {
  const [items, setItems] = useState([]);
  function addItem(newItem){
    let sorted_item = [];
    // add newItem here and
    // sort your items here
    setItems(sorted_item)
  }
  return (
    <section>
      <PhoneBookForm saveFn={addItem}/>
      <InformationTable Items={items}/>
    </section>
  );
}

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

Answer 2

There are several ways to do this. I only fix the Name for you and let you figure out the rest. So basically you have to create a state (useState) in your parent component (Application) and pass it down to via props to the two children components (PhoneBookForm and InformationTable). In the PhoneBookForm, you call the addEntryToPhoneBook function to update the state (i.e. adding names to the phonebook. In the InformationTable, you only have to render the state addEntryToPhoneBook from parent compnent.

https://i.sstatic.net/odJpd.png

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

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(props) {
    
    //Create a function to handle when info is submit.
    const handleFirstName = (e) => {
        e.preventDefault();
    
        //Updating the state of the parent using spread operator.
        //This is a standard way to update state since it's immutatble.
        //i.e. you update it via making a copy and adding new info
        props.addEntryToPhoneBook([...props.phoneBook, document.getElementById('firstName').value]);
    }

    return (
        <form style={style.form.container}>
            <label>First name:</label>
            <br />
            {/*Note: replace value with placeholder because value need to be able to change.*/}
            <input
                id='firstName'
                style={style.form.inputs}
                className='userFirstname'
                name='userFirstname'
                type='text'
                placeholder='Coder'
            />
            <br />
            <label>Last name:</label>
            <br />
            <input
                style={style.form.inputs}
                className='userLastname'
                name='userLastname'
                type='text'
                placeholder='Byte'
            />
            <br />
            <label>Phone:</label>
            <br />
            <input
                style={style.form.inputs}
                className='userPhone'
                name='userPhone'
                type='text'
                placeholder='8885559999'
            />
            <br />
            <input
                onClick={handleFirstName}
                style={style.form.submitBtn}
                className='submitButton'
                type='submit'
                placeholder='Add User'
            />
        </form>
    )
}

function InformationTable({ phoneBook }) {



    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>
            {/*Rendering the info in phoneBook via mapping*/}
            {
                phoneBook.map(data =>
                    <tr key={data}>
                        <th>
                            {data}<br />
                        </th>
                    </tr>
                )}
        </table>
    );
}

function Application() {
    //Create a state here to store all your data in the phonebook.
    const [phoneBook, addEntryToPhoneBook] = useState([]);
    console.log('userInfo parent: ', phoneBook)
    
    //Since you have to pass down two props, you can use objects like this.
    let props = {
        phoneBook: phoneBook,
        addEntryToPhoneBook: addEntryToPhoneBook
    }

    return (
        <section>
            {/*Passing down two props using spread operator*/}
            <PhoneBookForm {...props} />

            {/*Only passing down one prop here because you're don't need to display the data.*/}
            <InformationTable phoneBook={phoneBook} />
        </section>
    );
}

export default Application;