Underline <a> tag with React-CodePudding

I was Wondering how to give style to two tags in react without using the className(as not using className is the main challenge).

<a href="">Menu Here</a>
<a href="">Click Me </a>

So for the "curry dish," it should only underline when hovering. And for the click me it should be underlined first and disappear while hovering on it. I got both underlines removed using the code below. But still can't figure out how to apply separate styling please help.

a: hover {
  text-decoration: underline;
}

CodePudding user response：

If you're not using CSS you can do this with a simple stateful react component.

const UnderlineHover = ({children, ...rest}) => {
  const [isHover, setIsHover] = useState(false);

  const style = isHover ? {textDecoration: "underline"} : {};

  return <a onm ouseEnter={() => setIsHover(true)}
    onm ouseLeave={() => setIsHover(false)}
    style={...style}
    {...rest}
  >{children}</a>;
};

CodePudding user response：

**Tags in react without using the className:**

<span style={{color: "red",cursor: "pointer",
text-decoration: underline !important }}> 
<a href="">Menu Here</a>

</span>

CodePudding user response：

you can try with state and style like=>

const [hover,setHover] = useState("")
const handleMouseEnter =()=>{
setHover(true)
}
const handleMouseExit =()=>{
setHover(false)
}
const linkStyle = {
text-decoration: hover? underline:none;
}
return(
<a href="" style={linkStyle} onm ouseEnter={handleMouseEnter} onm ouseLeave={handleMouseExit}>Menu Here</a>
<a href="" style={linkStyle} onm ouseEnter={handleMouseEnter} onm ouseLeave={handleMouseExit}>Click Me </a>
)

Hope this will help to solve out your problem. If you still facing issue just lemme know, i will help you more. Thanks