SHARE
TWEET

Untitled

a guest May 22nd, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const names = ["Joel", "Juan", "Khurram", "Rosy", "Sumiya", "David", "Don"];
  2.  
  3. function helloList(name) {
  4.   var id = name.target.id
  5.   alert(`Hi ${id}`);
  6. }
  7.  
  8. const list = names.map(function(name) {
  9.  
  10.   return (<ul>
  11.       <li>
  12.         {name} <button id={name} onClick={helloList}>Greet</button>
  13.       </li>
  14.     </ul>)
  15. });
  16.  
  17.  
  18.  
  19. function alertHello() {
  20.   event.preventDefault();
  21.   alert('Hello!');
  22. }
  23.  
  24. function onSubmit(event) {
  25.   event.preventDefault();
  26.   const form = event.target;
  27.   const nameInput = form.elements.name;
  28.   const foodInput = form.elements.food;
  29.  
  30.   alert(`My name is ${nameInput.value} and my favourite food is ${foodInput.value}.`)
  31.   nameInput.value = foodInput.value = '';
  32. }
  33.  
  34. const jsxExpr = (
  35.   <div>
  36.     <p>
  37.       <button type='submit' onClick={alertHello}>Click to Alert "Hello!"</button>
  38.     </p>
  39.     <hr />
  40.     {/*
  41.   Use a form submit to alert the message
  42.   "Your name is ____ and you like to eat ____."
  43.   */}
  44.     <form onSubmit={onSubmit}>
  45.       <p>
  46.         <label>Name</label>
  47.         <input type="text" name='name' />
  48.       </p>
  49.       <p>
  50.         <label>Favorite Food</label>
  51.         <input type="text" name='food' />
  52.       </p>
  53.       <p>
  54.         <button type="submit">Click to alert</button>
  55.       </p>
  56.     </form>
  57.     <hr />
  58.  
  59.   {list}
  60.    
  61.   </div>
  62. );
  63.  
  64. const root = document.getElementById('root');
  65. ReactDOM.render(jsxExpr, root);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top