My dilemma involves this HTML element:
<a href onClick={() => fields.push()}>Add Email</a>
The purpose of the href attribute is to apply Bootstrap styles for link styling (color, cursor).
The issue arises when clicking on the element causes the browser to redirect. How can I modify the above code to prevent the browser from redirecting onClick while still executing fields.push()?
To prevent the default behavior, you should invoke the preventDefault function within the onClick event like so:
class App extends React.Component {
onClick = (e) => {
e.preventDefault()
console.log('onclick..')
}
render() {
return (
<a href onClick={this.onClick} >Click me</a>
)
}
}
You can customize this approach to fit your specific scenario:
const renderEmails = ({ fields }) => (
...
<a href onClick={(e) => {
e.preventDefault()
fields.push()
}}>Add Email</a>
...
)
Here is an easy fix,
Using React class components:
class App extends React.Component {
onClick() {
console.log('onclick..')
}
render() {
return (
<a href={void(0)} onClick={this.onClick} >Click me</a>
)
}
}
React now discourages the use of
javascript:void(0)solution and empty href attributes are not allowed.
In essence, React suggests using a different component like a button instead. By styling the button to appear as a link with CSS, you can achieve a similar look without the need for an href attribute. Therefore, opt for using a button element rather than trying to make an anchor tag work as a button. Hopefully, this clarifies things.
Instead of writing the click event inline, it might be better to create a separate method called clickHappens in your React component. Give it a try!
<a href onClick={(e) => {e.preventDefault(); fields.push()}}> Add Email </a>
Include e.preventDefault() in the onClick function and specify the attribute href="#"
<a href="#" onClick={(e) => { e.preventDefault(); fields.push(); }}>Add Email</a>
After implementing Ritesh's solution and successfully resolving the issue of "Received true for a non-boolean attribute href", I made a minor modification by replacing the <a> tag with a <span>
class App extends React.Component {
onClick = (e) => {
e.preventDefault()
console.log('The button was clicked')
}
render() {
return (
<span onClick={this.onClick}>Click here</span>
)
}
}
Creating a custom component is as simple as this example:
import React from "react";
export default function CustomLink({ to, className, children }) {
return (
<a
href={to}
className={className}
onClick={(e) => {
e.preventDefault();
}}
>
{children}
</a>
);
}
Give this code a try:
<a href={undefined} onClick={() => {/*insert function code here*/}}></a>
The void(0) function returns undefined. Therefore, in React, it is recommended to directly write undefined instead of using javascript:URL due to deprecation.
For more information, check out this link.
Here is another solution that may prove useful:
<a href={void(0)} onClick={(e)=>{
e.preventDefault();
}}>
Check out this easy fix that has worked well for me:
<a href={'/'} onClick={
(e) => {
e.preventDefault()
openProfileBox()
}
}
target="self" title='profile'>
{iconStyle(CgProfile)}
</a>
The "href" attribute is set as a link to the index page, but by using the "e.preventDefault()" method, I can prevent the link from functioning and instead trigger the second function successfully.
This is how I utilize it:
const link = '#'
<a href={link} onClick={() => alert('Test')}>Some text</a>
When it comes to handling conditional redirects, this one-liner does the trick quite nicely. Simply provide a null value for the href attribute, and watch as it elegantly transforms into a dummy Anchor tag.
<a href={shouldRedirect ? null : DESTINATION_LINK}>link</a>
// This will render as `<a>link</a>` within the DOM structure.
e.preventDefault(); <a href={null} onClick={()=>{console.log('...')}}>
One way to handle the issue of `Javascript:void(0);` in React JS is by utilizing the `href="preventDefault()"`. By doing so, you can effectively stop the default action of a link that would typically result in a page refresh or navigation.
Another approach is to utilize a <button> that resembles a hyperlink rather than using an anchor tag with no action on click.
button {
background: none!important;
border: none;
padding: 0!important;
color: #069;
text-decoration: underline;
cursor: pointer;
}<button type="button"> My styled link </button>include the following Javascript:void(0) code:
<a href="javascript:void(0);" onClick={() => fields.push()}>Click here to add Email</a>
fields.push()}>Include Email
Is there an alternative method in TypeScript to avoid warnings when using href="javascript:void(0);"?
check out this code snippet below
<a href="true" ....>
As a novice in NodeJS, I attempted to create an authentication form using NodeJS + express. The issue I am facing is regarding password validation - specifically, when "confirmpassword" does not match "password", it should return nothing. Despite my effo ...
I'm struggling to convert a JSON object into an HTML table, but I can't seem to nail the format. DESIRED TABLE FORMAT: Last Year This Year Future Years 45423 36721 873409 CURRENT TABLE FORMAT: Last Year 45423 This ...
As a newcomer to Angular, I am eager to upgrade some old jQuery code with AngularJS. The task at hand is to extract a string from a span element, split it into two separate strings, and then use these as parameters in a GET request. I am dedicated to lea ...
I recently encountered a problem with my code that used to access the camera on Chrome browser and release it after use. Here's the code snippet: Starting the Camera: navigator.webkitGetUserMedia($scope.options.videoObj, function (stream) { $sco ...
Is it necessary to wrap the js-ternary operator with 'as' Type Assertion? ios ? TouchableOpacity : View as React.ElementType Will it automatically use the result of '?:' since it comes first? Or would a better implementation be: (ios ...
As I delve into react routing practice, I've put together a geography-based web app. Starting off, I configured the router paths: import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRo ...
Hey there! So I'm diving into Nodejs and I've managed to create a simple login/register API. For password encryption, I'm using bcryptjs. Testing it out on postman, I can successfully register a new user. However, when attempting to login wi ...
While developing a loop to parse my API data, I encountered an issue where the values obtained were not being captured properly for dynamically loading corresponding components based on their characteristics. The problem arose after implementing useState() ...
I encountered an error that I'm struggling to pinpoint. The issue seems to be related to the presence of the ' symbol in the JSON data. After thoroughly checking, I am positive that the PHP function json_encode is not responsible for adding this ...
I recently started using React Material-ui for the first time. Whenever I run yarn start in my react app, it takes quite a while (approximately 25 seconds) on my setup with an i5 8400 + 16 GB RAM. Initially, I suspected that the delay might be caused by e ...
Recently, I executed the following command: npm config set prefix /usr/local After executing this command, I encountered an issue when attempting to run any npm commands on Windows OS. The error message displayed was as follows: Error: EPERM: operation ...
Currently, I am in the process of constructing a website that incorporates a third-party weather HTML widget. The widget is sourced from a trusted and reliable source on the web. It consists of a link and small JavaScript tags that are executed once loaded ...
After a user registers, they are automatically taken to /proto where they can view a list of animals available for adoption. However, the challenge lies in identifying the specific user who clicked the button (as this information must be associated with th ...
Hey there! I'm looking for a way to convert columns into rows and vice versa. In my table, I have both column headers and row headers on the left side. The row headers are simply bold text placed next to each row to describe its content. I want to op ...
Some material-ui components, such as Dialog and Menu, do not render their results in the same location as where they are placed by their parent component. Due to this behavior, testing for the presence of content within these components becomes challengin ...
I've been facing some difficulties with passing a value from one file to another. The problem seems to be related to implementing context, but I can't seem to figure out where I went wrong! import React from 'react' const Mycontext = ...
I've been delving into AngularJS lately, but I'm having trouble displaying the data from my MySQL database on the view. Here's the code snippets I'm working with: todoController.js angular .module('todoApp') .control ...
Is it possible to generate HTML and SVG code based on the position of a Subscriber on a web page or within a specific div? I would like to provide some JavaScript code that can be inserted inside a particular div on the page. Using an iframe is not ideal ...
Just to verify, both NextJS and Gatsby are connected to a Strapi api that supports GraphQL, with the server running on http://localhost:1337 In addition, I can access the GraphQL playground through http://localhost:1337/graphql However, Gatsby allows me t ...
Can you help me with adding a line break between two variables that will be displayed properly in my HTML output? I'm trying to create an object with a single description attribute using two text variables, and I need them to be separated by a line b ...