React toggle hyperlink of grid header

Question

I am working with react with Web API. I need one solution where I wanted to have one Hyperlink for once of the headers of Grid. And once I click's over the hyperlink, I wanted to hide this hyperlink and show other hyperlink (toggle). For Ex-

Those Hyperlinks are not directing anywhere. These are in use to select all Radiobuttons and another Hyperlink is used for unselecting all the Radiobuttons for Grid rows.

Answer 1

It's easy to toggle. But it's a hyperlink, which makes it a little tricky. Does the hyperlink links to anywhere?

Anyway, you can toggle the href in onClick, in order for 'href' take effect before 'href' itself is changed, use setTimeout (10 milliseconds should be enough):

import React from 'react'

const ToggleLinks = () => {
    const google = {href:"https://google.ca", text:"google"};
    const yahoo = {href:"https://yahoo.ca", text:"yahoo"};
    const [link, setLink] = React.useState(google);

    const toggleLink = e => {
        console.log('clicked')
        console.log(e.target)
        setTimeout(() => {
            setLink(p => {
                return p.href === "https://google.ca" ? yahoo : google;
            })
        }, 10);

    }
   return (
       <div>
           <h1>ToggleLinks</h1>
           <a href={link.href} onClick={toggleLink} target="_blank" rel="noreferrer">{link.text}</a>
       </div>
   )
}

export default ToggleLinks