. Advertisement .
..3..
. Advertisement .
..4..
React is a library for making composable user interfaces. It encourages the development of reusable UI components that present dynamic data. React is regularly used as the V in MVC. How To Set an onClick listener on a Link in React is a fairly common problem that any programmer will face. So, what are the best solutions? Everything will be made clearly to you in this article. Read on it.
What is the onClick handler in React?
The React onClick
event handler allows you to trigger an action and call a function when an user clicks an element, such as a button, in your app.
The names of event are written in camelCase, so in a React app, the onclick
event is written as onClick
. Additionally, React event handlers emerge inside curly braces.
How to Set an onClick listener on a Link in React?
Method 1: Follow two steps
The primary library for React navigation configuration is React Router. It provides you with every component needed to construct a navigation system. One of the most crucial features offered by React Router is Link
. This element is a significantly more sophisticated substitute for HTML’s <a>
tag. Link components frequently create navigation menus and broken links to app pages.
The to
is perhaps the most crucial prop that the component accepts out of all of them. With the help of this prop, we can tell the Link
component where to go concerning the homepage.
Follow the two steps to set an onClick listener on a link in React:
- On the link, set the onClick property.
- Every time the link is clicked, the function you supply to the prop will be called.
import {BrowserRouter as Router, Link} from 'react-router-dom';
export default function App() {
const handleLinkClick = event => {
console.log('You clicked the link');
// refers to the link element
console.log(event.currentTarget);
};
const handleAnchorClick = event => {
console.log('You clicked on the anchor element');
// refers to the link element
console.log(event.currentTarget);
};
return (
<Router>
<div>
{/* react router link */}
<Link onClick={handleLinkClick} to="/about">
Go to About
</Link>
<br />
<br />
{/* Anchor link */}
<a
onClick={handleAnchorClick}
href="https://ittutoria.net/"
target="_blank"
rel="noreferrer"
>
ITtutoria.net
</a>
</div>
</Router>
);
}
The code sample demonstrates adding an onClick event listener to an anchor or React router Link.
The handleClick function is used each time the link is clicked.
If the link element has to be accessed, you should use the event object’s currentTarget attribute. We may retrieve the element to which the event listener is attached using the currentTarget attribute of the event.
The event’s target property references the element that caused the event (it could be a descendant).
Set the onClick prop to an inline arrow function if you want to give a parameter to the handleClick function.
import {BrowserRouter as Router, Link} from 'react-router-dom';
export default function App() {
const handleLinkClick = (event, message) => {
console.log('You clicked the link');
console.log(message);
};
const handleAnchorClick = (event, message) => {
console.log('You clicked on the anchor element');
console.log(message);
};
return (
<Router>
<div>
{/* react router link */}
<Link onClick={event => handleLinkClick(event, 'hello')} to="/about">
Go to About
</Link>
<br />
<br />
{/* Anchor link */}
<a
onClick={event => handleAnchorClick(event, 'world')}
href="https://ittutoria.net/"
target="_blank"
rel="noreferrer"
>
ITtutoria.net
</a>
</div>
</Router>
);
}
Remember that you are providing a function to the onClick prop and it is not the result of calling one.
If you request the function when you pass it to the onClick
prop, such as onClick={handleClick()}
, it will be immediately called when the component mounts.
This method also helps you to set the onClick
prop on any other element, for example a button
, a span
, etc.
Method 2: React requires the onClick attributeto be added to the target element
React requires the onClick attribute, the event handler, to be added to the target element to listen to events. When an element is clicked, this specifies the action to be taken, as illustrated below:
import React from "react";
const ShowAlertComponent = () => {
const showAlert = () => {
alert("I am an alert");
}
return <button onClick={showAlert}>Show alert</button>;
}
export default ShowAlertComponent;
The showAlert function, which shows the alert message “I am an alert” on button clicks, is assigned as the event target in the sample above’s onClick property.
Two solutions mentioned above are very simple, right? However, they work very flawlessly. They will help you resolve your problem and make your program will run well without any errors. So, what are you waiting without applying them to get your desired results? Let’s try them.
Conclusion
The options mentioned above are the quickest for problem How To Set an onClick listener on a Link in React. We hope that you will enjoy this article. If you still require assistance or have troubles, we have a strong population where everyone is normally eager to assist. At last, we sincerely wish for a day filled with new code alternatives, and thank you for your time spent reading.
Read more
Leave a comment