Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

React Events

React Events with ReactJS Tutorial, ReactJS Introduction, ReactJS Features, ReactJS Installation, Pros and Cons of ReactJS, AngularJS vs ReactJS, Reactnative vs ReactJS, ReactJS Router, ReactJS Flux Concept, ReactJS Animations, ReactJS Discussion, ReactJS Quick Guide, etc.

<< Back to REACT

React Events

An event is an action that could be triggered as a result of the user action or system generated event. For example, a mouse click, loading of a web page, pressing a key, window resizes, and other interactions are called events.

React has its own event handling system which is very similar to handling events on DOM elements. The react event handling system is known as Synthetic Events. The synthetic event is a cross-browser wrapper of the browser's native event.

React Events

Handling events with react have some syntactic differences from handling events on DOM. These are:

  1. React events are named as camelCase instead of lowercase.
  2. With JSX, a function is passed as the event handler instead of a string. For example:

Event declaration in plain HTML:

Event declaration in React:

3. In react, we cannot return false to prevent the default behavior. We must call preventDefault event explicitly to prevent the default behavior. For example:

In plain HTML, to prevent the default link behavior of opening a new page, we can write:

In React, we can write it as:

function ActionLink() {
    function handleClick(e) {
        console.log('You had clicked a Link.');
    return (

In the above example, e is a Synthetic Event which defines according to the W3C spec.

Now let us see how to use Event in React.


In the below example, we have used only one component and adding an onChange event. This event will trigger the changeText function, which returns the company name.

import React, { Component } from 'react';
class App extends React.Component {
    constructor(props) {
        this.state = {
            companyName: ''
    changeText(event) {
    render() {
        return (

Simple Event Example

You entered: { this.state.companyName }

); } } export default App;


When you execute the above code, you will get the following output.

React Events

After entering the name in the textbox, you will get the output as like below screen.

React Events

Related Links:

Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf