Click event and function in ReactJs.

In this reactjs tutorial for beginners we learn how to make click event and how to call a function on click event in react js.

1. Right Click on src folder and click on New File to create your first file.
2. Give the file name for your page like (User.js) keep the first latter as capitalize.
3. Wright below code in your file (User.js).

For direct function call use Arrow Function ()=>

How to make click event (Call function in the button click)

User.js

function User() {
    return (
        <div className="App">
            <h3>User.js Component</h3>
            <button onClick={()=>alert("Direct Call Alert")}>Click Me</button>
        </div>
    );
}
export default User;

Example -1 User.js

function User() {
	function test()
	{
		alert("Alert testing");
	}
return (
	<div className="App">
		<h1>Hello World !</h1>
		<button onClick={()=>test()}>Click me</button>
	</div>
);

}
export default User;

Example -2 User.js

function User() {
	function test()
	{
		alert("Alert testing");
	}
return (
	<div className="App">
		<h1>Hello World !</h1>
		<button onClick={test}>Click me</button>
	</div>
);

}
export default User;

Example -3 User.js

Variable in functional Component

User.js

function User() {
    let data="ReactJS";
    function test()
    {
    data="Programing";
      alert(data);
    }
    return (
      <div className="App">
       <h1>Hello World !</h1>
       <h2>{data}</h2>
       <button onClick={test}>Click Me</button>
      </div>
    );
  }

export default User;

function User() {
    let data="ReactJS";
	function test()
	{
		alert("Alert testing");
	}
return (
	<div className="App">
		<h1>Variable - {data}</h1>
		<button onClick={test}>Click me</button>
	</div>
);

}
export default User;

Change Variable in functional Component

function User() {
    let data="ReactJS";
	function test()
	{
        data="New ReactJS"
		alert(data);
	}
return (
	<div className="App">
		<h1>Variable - {data}</h1>
		<button onClick={test}>Click me</button>
	</div>
);

}
export default User;

App.js

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

import {User} from './User'
function App() {
  return (
    <div className="App">
     <h1>Hello World !</h1>
     <User />
    </div>
  );
}

export default App;

1. Open Index.js file and import or replace default ‘./App’ file name to your file name ‘/User’.
2. Same as in render function, just add or replace <App /> tag to your file name tag <User />.

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Example of Click event