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 (
    <div className="App">
     <button onClick={handleClick}>Click me</button>
    </div>
  );
}
export default App;

import logo from './logo.svg';

import './App.css';

function App() {

function handleClick() {

alert('Button clicked!');

}

return (

<button onClick={handleClick}>Click me</button>

</div>

);

}

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 (
    <div className="App">
      <button onClick={() => handleClick('Ram')}>Click me</button>
    </div>
  );
}
export default App;

import logo from './logo.svg';

import './App.css';

function App() {

function handleClick(name) {

alert(`Hello ${name}!`);

}

return (

<button onClick={() => handleClick('Ram')}>Click me</button>

</div>

);

}

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 (
    <div className="App">
      <button onClick={handleClick}>Toggle content</button>
      {showContent && <p>This content is now visible!</p>}
    </div>
  );
}

export default App;

import logo from './logo.svg';

import './App.css';

import { useState } from 'react';

function App() {

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

function handleClick() {

setShowContent(!showContent);

}

return (

<button onClick={handleClick}>Toggle content</button>

{showContent && <p>This content is now visible!</p>}

</div>

);

}

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!');
}

<a href="#" onClick={handleClick}>Click me</a>

function handleClick(event) {

event.preventDefault();

alert('Link clicked!');

}

<a href="#" onClick={handleClick}>Click me</a>

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 (
    <div className="App">
      <a href='#' onClick={handleClick}>Click Me</a>
    </div>
  )
};

export default App;

import logo from './logo.svg';

import './App.css';

function App() {

function handleClick(event) {

event.preventDefault();

alert('Link clicked!');

}

return (

<a href='#' onClick={handleClick}>Click Me</a>

</div>

)

};

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 (
    <div className="App">
      <button onClick={handleClick}>Click me</button>
      <p>You clicked the button {count} times</p>
    </div>
  )
};

export default App;

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 (

<button onClick={handleClick}>Click me</button>

<p>You clicked the button {count} times</p>

</div>

)

};

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 (
    <div className="App">
      <button onClick={handleClick.bind(null, 'Ram')}>Click me</button>
    </div>
  )
};

export default App;

import logo from './logo.svg';

import './App.css';

function App() {

function handleClick(name) {

alert(`Hello ${name}!`);

}

return (

<button onClick={handleClick.bind(null, 'Ram')}>Click me</button>

</div>

)

};

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 (
    <div className="App">
      <a href="#" onClick={handleClick}>Click me</a>
    </div>
  )
};

export default App;

import logo from './logo.svg';

import './App.css';

function App() {

function handleClick(event) {

event.preventDefault();

alert('Link clicked!');

}

return (

<a href="#" onClick={handleClick}>Click me</a>

</div>

)

};

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 (
    <div className="App">
      <div onClick={() => alert('Container clicked!')}>
        <button onClick={handleClick}>Click me</button>
      </div>
    </div>
  )
};

export default App;

import logo from './logo.svg';

import './App.css';

function App() {

function handleClick(event) {

event.stopPropagation();

alert('Button clicked!');

}

return (

<div onClick={() => alert('Container clicked!')}>

<button onClick={handleClick}>Click me</button>

</div>

)

};

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 (
      <div className="App">
        <button onClick={() => this.handleClick()}>Click me</button>
        <p>You clicked the button {this.state.count} times</p>
      </div>
    );
  }
}


export default App;

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 (

<button onClick={() => this.handleClick()}>Click me</button>

<p>You clicked the button {this.state.count} times</p>

</div>

);

}

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 (
    <div className="App">
      <h2>Welcome to React Event Learner</h2>
      <button onClick={message}>Show Message</button>
      <button onClick={()=>info("My App")}>Show Info</button>
      <button onClick={()=>add(2,3)}>Add Numbers</button>
      <button onClick={()=>simpleIntrest(5000,12,5)}>Calculate Simple Interest</button>
    </div>
  );
}

export default App;

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 (

<h2>Welcome to React Event Learner</h2>

<button onClick={message}>Show Message</button>

<button onClick={()=>add(2,3)}>Add Numbers</button>

<button onClick={()=>simpleIntrest(5000,12,5)}>Calculate Simple Interest</button>

</div>

);

}

export default App;