<div class="container">
  <div id="vanilla-container">
    <div id="edit-container">
      <label for="first_name">
        First Name:
        <input type="text" name="first_name" id="first_name" />
      </label>
      <label for="middle_name">
        Middle Name:
        <input type="text" name="middle_name" id="middle_name"/>
      </label>
      <label for="last_name">
        Last Name:
        <input type="text" name="last_name" id="last_name"/>
      </label>
    </div>
    <div id="preview-container">
      <label for="name_preview">
        Name:
        <p id="name_preview" name="name_preview"></p>
      </label>
    </div>
  </div>
  <div id="react-container">
    
  </div>
</div>

#vanilla-container {
  display: flex;
  flex-direction: column;
  font-size: 2em;
}

#edit-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
}

#preview-container {
  display: flex;
  flex-direction: row;
  color: blue;
}

input {
  font-size: 0.8em;
}

// *** VANILLA JS *** //

// Store the form data
let state = {
  first_name: "",
  middle_name: "",
  last_name: ""
}

// Get the input elements
let firstName = document.getElementById("first_name")
let middleName = document.getElementById("middle_name")
let lastName = document.getElementById("last_name")
let namePreview = document.getElementById("name_preview")

// Handle input events
const handleInput = (e) => {
  state[e.target.name] = e.target.value
  namePreview.textContent = 
    state.first_name + " " + 
    state.middle_name + " " + 
    state.last_name
}

// Attach input event handler
firstName.addEventListener("input", handleInput, false)
middleName.addEventListener("input", handleInput, false)
lastName.addEventListener("input", handleInput, false)

// *** REACT ***//
const inputElement = (name, label) => {
  return (
    <div>
      <label htmlFor={name}>
        {label}
        <input
          type="text"
          name={name}
          id={name}
         />
       </label>
    </div>
  )
}