Question 309332 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to add both onclick and href both a in a button of a React page?

I have a button element in React page. With onclick event I called a function from my context. Now I want to add a href in that button.

Here is my code:

{ categoryData.map((item,index)=>{
            return(
                  
                <button className="dropdown-item"  to={/articles/${item}} onClick={updateFilterValue} key={index}  name="category" value={item}>{ item }</button>
                )
})}

This is my updateFilterValue function:

const updateFilterValue = (event) => {
        let name = event.target.name;
        let value = event.target.value;
    
        return dispatch({ type: "UPDATE_FILTERS_VALUE", payload: { name, value } });
      };

Basically onclick will pass the name and value attribute to updateFilterValue function. I am getting this updateFilterValue from my context. Now at the same time I want to redirect to /articles/${item} route. How to do that?

Tags:

4

Answers


  1. 0

    If you want to go to the route with the item on click, you can use the Navigate element of the react-router dom you can simple have this inside your function.

    You can refer here for Navigate docs

    import { Navigate } from "react-router-dom";
{ categoryData.map((item,index)=>{
     return(
           <button className="dropdown-item"
    onClick={()=>
    {
      updateFilterValue(name,value)
      <Navigate to=`/articles/${item}` replace={true} />
    } 
    key={index}  name="category" value={item}>{ item }</button>
    )
})
}
    Login or Signup to reply.
  2. 0

    Inside updateFilterValue function, you can set window.location.href = "/articles/${item}" so that after the code of your function you get redirected to that route.

    Hope it helps.

    Login or Signup to reply.
  3. 0

    You can achieve this by Without using any Routing Libraby

    • You Just need to add one anchor tag in Button To perform OnClick and Href.
      Just Add <a href="/your-RouteAddress">{item}</a>

    Your Code Look Like :-

    {
categoryData.map((item, index) => {
  return (
    <button className="dropdown-item" onClick = { updateFilterValue } key = { index } name = "category"
    value = { item } >
  <a href="/articles/${item}">{item}</a>
    </button >
)
 })}

    • You Also Can Use Link to achieve this By Using Link Tag.
      You Need to Import Link Tag

      import { Link } from "react-router-dom";

    And Your Code Will be

    import { Link } from "react-router-dom";
{ categoryData.map((item,index)=>{
return(
    <button className="dropdown-item" onClick={updateFilterValue} key={index} name="category"
    value={item}>
    <Link to="/articles/${item}">{ item }</Link>
    </button>
)
})}
    Login or Signup to reply.
  4. 0

    Two ways to do this depending on your requirement.

    First Method

    import React from 'react';

const MyButton = () => {
const handleClick = () => {
// Write your onClick logic here
console.log('Button clicked');

// Navigate to a new page using window.location.href
window.location.href = 'https://example.com';
};

return (
<button onClick={handleClick}>
  Click me
</button>
);
};

export default MyButton;

    and the Second Method will be:

    import React from 'react';
import { Link } from 'react-router-dom';

const MyButtonLink = () => {
return (
<Link to="/new-page">
  <button onClick={()=> alert('on Click working')}>
    Click me
  </button>
</Link>
);
};

export default MyButtonLink;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search