onClick event handler examples in ReactJs

ReactJS is a popular JavaScript library that is used to build user interfaces. One of the key features of ReactJS is its ability to handle events efficiently using onClick event handlers. In this article, we will provide 15 examples of onClick event handlers in ReactJS, which are ideal for beginners who are just starting to learn this library.

1 Basic onClick event handler

This is a basic example of an onClick event handler that alerts the user when a button is clicked:

import logo from './logo.svg';
import './App.css';

function App() {
  function handleClick() {
    alert('Button clicked!');
  }
 
  return (
    

     
    

  );
}
export default App;

2 Pass argument to onClick event handler

This example shows how to pass an argument to the onClick event handler:

import logo from './logo.svg';
import './App.css';

function App() {
  function handleClick(name) {
    alert(Hello ${name}!);
  }

  return (
    

      
    

  );
}
export default App;

3 Conditional rendering with onClick event handler

This example demonstrates how to conditionally render content based on the onClick event handler:

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function App() {
  const [showContent, setShowContent] = useState(false);

  function handleClick() {
    setShowContent(!showContent);
  }

  return (
    

      
      {showContent && 
This content is now visible!
}
    

  );
}

export default App;

4 Pass event object to onClick event handler

This example shows how to pass the event object to the onClick event handler:

function handleClick(event) {
  event.preventDefault();
  alert('Link clicked!');
}

Click me

5 Using arrow function in onClick event handler

This example demonstrates how to use an arrow function in the onClick event handler:

import logo from './logo.svg';
import './App.css';


function App() {
  function handleClick(event) {
    event.preventDefault();
    alert('Link clicked!');
  }
  return (
    
  )
};

export default App;

6 Accessing state in onClick event handler

This example shows how to access the state in the onClick event handler:

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';


function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }
  return (
    

      
      
You clicked the button {count} times

    

  )
};

export default App;

7 Using bind() method in onClick event handler

This example demonstrates how to use the bind() method in the onClick event handler:

import logo from './logo.svg';
import './App.css';



function App() {
  function handleClick(name) {
    alert(Hello ${name}!);
  }
  return (
    

      
    

  )
};

export default App;

8 Using preventDefault() in onClick event handler

This example shows how to use the preventDefault() method in the onClick event handler:

import logo from './logo.svg';
import './App.css';



function App() {
  function handleClick(event) {
    event.preventDefault();
    alert('Link clicked!');
  }
  return (
    
  )
};

export default App;

9 Using stopPropagation() in onClick event handler

This example demonstrates how to use the stopPropagation() method in the onClick event handler:

import logo from './logo.svg';
import './App.css';



function App() {
  function handleClick(event) {
    event.stopPropagation();
    alert('Button clicked!');
  }
  return (
    

      
 alert('Container clicked!')}>
        
      

    

  )
};

export default App;

10 Using setState() method in onClick event handler

This example shows how to use the setState() method in the onClick event handler:

import logo from './logo.svg';
import './App.css';
import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      

        
        
You clicked the button {this.state.count} times

      

    );
  }
}


export default App;

Using Multiple onClick events in App.js 

import logo from './logo.svg';
import './App.css';

function App() {
  const message=()=>{
 alert("welcome to My App");
  }
  const info=(msg)=>{
    alert("Welcome to "+msg);
  }
  const add=(a,b)=>{
    alert("Addition of two numbers are "+(a+b));
  }
  const simpleIntrest=(p,r,t)=>{
    alert("Simple Interest is "+(p*r*t/100));
  }
  return (
    

      
Welcome to React Event Learner

      
      
      
      
    

  );
}

export default App;