React: ES5 Features You Need to Know

Tanner Plauche

Dec 1, 2016 • 2 min read

Using events

All JavaScript functions can use events as parameters. An event is an object that is created when a function is called. It is literally a JavaScript object that has a list of properties that can be used. You can see a list of event properties here: https://developer.mozilla.org/en-US/docs/Web/API/Event.

Events have properties that carry information about user actions. For example, an HTML input can call a function every time that it changes. The function that is called can use the value of the input.

<html>

  <head>
  </head>

  <body>
 <!-- Input that calls the function with an event -->
    <input type="text" onchange="updateText(event)" />       
  </body> 

 <!-- JavaScript that defines the function -->
  <script>
    function updateText(e){
       var myText = e.target.value;
      console.log(myText);
    }
   </script>
</html>

In this example, the parameter e represents the event object that is passed to the function. The event has a property target which references the UI element that the user interacted with and that called the function. target.value refers to the value of the HTML input, which is what the user typed into the input. Notice that when the function is called that no parameter is passed in. The event object is passed in by default.

Event.target

The event target is the most commonly used property of event objects. Since it references the ui element, the developer can immediately use the target to get data, update the UI state, or perform some other function. The target also provides a lexical context that enables the developer to access other UI elements such as the the parentNode or childNode.

The event target is commonly used to manage text inputs in React. Since React does not use two-way data binding, state must be updated explicitly through functions that use events as data resources.

Array.map()

The map() method returns a new array with the results of calling a function for every array element. Array.map takes a function as a parameter and passes each item in the array into that function. The output of the function is passed into the final array.

var nums = [1, 2, 3, 4, 5];

var doubles = nums.map(function(num){
   return num * 2
});

// doubles is now equal to [2, 4, 6, 8, 10];

React uses the Array.map() method to make lists!*
If you had a component called ListItem that had an
parent Element, you could simply make a list by mapping an array and returning that component.

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var NumberList = numbers.map(function(num){
   return (<ListItem number={num} />)
}

You can then simply use that array of components directly in your HTML or JSX

<ul>
    {NumberList}
</ul>

This will render a list of numbers 1-10:

Array.forEach()

The for each method is an array method that is more declarative way to write a loop.

A typical for loop looks something like this:
```JavaScript``
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
for(var i=0; i<number.length; i++){
console.log(numbers[i]); // Prints out numbers 1-10
}


This is fine, but the forEach method makes it a little easier and faster to write a loop with you want to write a loop that iterates through items in an array. 

```JavaScript``
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
numbers.forEach(function(num){
     console.log(num; // Prints out numbers 1-10
})

Event Handlers:

onclick:The event occurs when the user clicks on an element
onkeydown :The event occurs when the user is pressing a key
Onkeypress:The event occurs when the user presses a key
onkeyup:The event occurs when the user releases a key
onsubmit: The event occurs when a form is submitted

AND the list is much longer!