ReactJS Events

For the  Javascript, when an event occurs, a function will be called to execute. But for the  React, when an event occurs, a method of  Component is called. This example component renders a div that responds to click events.

var BannerAd = React.createClass({

onBannerClick: function(evt) {

// codez to make the moneys


render: function() {

// Render the div with an onClick prop (value is a function)

return <div onClick={this.onBannerClick}>Click Me!</div>;



That’s it. You add onXXX to the nodes you want. Notice how the value of the prop is a function.


This is a simple example where we will only use one component. We are just adding onClick event that will trigger updateState function once the button is clicked.


import React from ‘react’;

class App extends React.Component {

constructor(props) {


this.state = {

data: ‘Initial data…’


this.updateState = this.updateState.bind(this);


updateState() {

this.setState({data: ‘Data updated…’})


render() {

return (


<button onClick = {this.updateState}>CLICK</button>






export default App;


import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./App.jsx’;

ReactDOM.render(<App/>, document.getElementById(‘app’));

Arrow Function

With the Javascript ES6 syntax, you can create an  arrow function, which is very short and easy-to-understand:

// Normal function with parameters

var myfunc = function(param1, param2)  {

// Statements


// Arrow function with parameters.

var arrfunc = (param1, param2) => {

// Statements


Get industry recognized certification – Contact us