const names = ["Joel", "Juan", "Khurram", "Rosy", "Sumiya", "David", "Don"];

function helloList(name) {
  var id = name.target.id
  alert(`Hi ${id}`);
}

const list = names.map(function(name) {

  return (<ul>
      <li>
        {name} <button id={name} onClick={helloList}>Greet</button>
      </li>
    </ul>)
});



function alertHello() {
  event.preventDefault();
  alert('Hello!');
}

function onSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const nameInput = form.elements.name;
  const foodInput = form.elements.food;

  alert(`My name is ${nameInput.value} and my favourite food is ${foodInput.value}.`)
  nameInput.value = foodInput.value = '';
}

const jsxExpr = (
  <div>
    <p>
      <button type='submit' onClick={alertHello}>Click to Alert "Hello!"</button>
    </p>
    <hr />
    {/*
  Use a form submit to alert the message
  "Your name is ____ and you like to eat ____."
  */}
    <form onSubmit={onSubmit}>
      <p>
        <label>Name</label>
        <input type="text" name='name' />
      </p>
      <p>
        <label>Favorite Food</label>
        <input type="text" name='food' />
      </p>
      <p>
        <button type="submit">Click to alert</button>
      </p>
    </form>
    <hr />

  {list}

  </div>
);

const root = document.getElementById('root');
ReactDOM.render(jsxExpr, root);