React has an internal event system that gets triggered every time a certain action is taken by the user. For example, an event can be triggered when you click on a button with the onClick prop:. When you click on the button above, the event variable will be logged as a SyntheticBaseEvent object in your console:.
The event argument passed into handleClick is React’s own Synthetic event. It will always get send into your event handler function.
React’s Synthetic events are basically wrappers around the native DOM events. They are helper functions created to make sure the events have consistent properties across different browsers.
These specific events are baked into React library to help you in creating the proper responses to a user’s actions.
General use cases where you need to make use of these event handlers include listening to user inputs and storing form input data in React’s state.
But since Synthetic events are just wrappers, the internal default behavior of the DOM object will still be triggered.
One problem with the native DOM events is that it sometimes triggers a behavior that you don’t need.
For example, a form’s submit button in React will always trigger a browser refresh to submit the data into a backend system. This is bad because the behavior you defined in the onSubmit event function will be ignored by the browser.
Try the following example:. Because of the default DOM event behavior, the handleSubmit function will be ignored and your log will not get written on the console.
This may be good in the past where the entire form validation and processing happens in the backend, but modern web applications tend to run the form validation process on the client-side in order to save time and bandwidth.
To do so, you need to run your own defined behavior. To cancel the native behavior of the submit button, you need to use React’s event.preventDefault() function:.
And that’s all you need. Now the default event behavior will be canceled, and any code you write inside handleSubmit will be run by the browser.
You can also write the preventDefault() function on the last line of your function:. But for collaboration and debugging purposes, it’s always better to write the prevent function just below your function declaration. That way you won’t cause a bug by forgetting to put the prevent function too.
Related articles:. As you develop your React application, there will be times when you need to filter some data and display only those that meets your criteria.
The JSX syntax doesn’t introduce any feature for filtering data at all.
For example, you can filter an array of numbers and return those greater than 60:. The filter() function accepts a callback function and use it to test the value of each element.
It will then return an array with the elements that pass the test.
If no elements pass the test, an empty array will be returned. You can then use the map() function to render the new array.
You can chain the filter() and map() function together to shorten your code like this:. The result will be the same.
You can use the filter with any type of data. You can filter an array of objects by checking on the object value.
For example, let’s say you have an array of tasks:. When you only want to display tasks that haven’t been completed yet, you can filter the array using the value of taskStatus property, as follows:. And that’s how you can filter data in React.
In this tutorial we're going to setup a production ready web server from scratch on the Amazon EC2 (Elastic Compute Cloud) service, then deploy a custom MERN Stack application to it that supports user registration and authentication.
A MERN Stack application is made up of a front-end app built with React that connects to a back-end api built with Node.js + Express + MongoDB, hence the name MERN Stack (Mongo, Express, React, Node).
Other variations of the stack include the MEAN Stack that has an Angular front-end, and the MEVN Stack that has a Vue.js front-end. This tutorial will be focused on setting up the server on AWS EC2, then deploying and configuring the front-end and back-end pieces of the MERN stack app to work together.
For more in-depth information about the React app or Node.js api used in this post, check out the following tutorials which cover them in detail:.
Before doing anything we need a server that we can work on, follow these steps to spin up a new Ubuntu 18.04 server instance on AWS EC2.
Sign into the AWS Management Console at https://aws.amazon.com/console/. If you don't have an account yet click the "Create a Free Account" button and follow the prompts.