appendElement in React js help?

1

How do I add element.appendChild(element) functionality in to react js, I will use useState() hook to add element but I parse like this [object]HtmlSpanElement I don’t understand how do I add markup into my component element?

I want to add span element in my button dynamically in react here is my code.

<Link onMouseOver={(e) => {
          let x = e.clientX - e.target.offsetLeft;
          let y = e.clientY - e.target.offsetTop;
          let ripples = document.createElement('span');
          ripples.style.left = `${x}px`;
          ripples.style.top = `${y}px`;
          e.target.appendElement(ripples)

        }} className="call-to-action" to="/contact">Let's Talk <FaArrowRight className="fa-arrow-right" /> </Link>
2

In React, I guess you add elements to the markup by conditionally rendering a component, not by using pure JS to append elements to the DOM.

3

@priyanshushrama709 hey,

You want to show a span element when your mouse hovers over the link?

const [show, setShow] = useState(false)

<Link 
onMouseEnter={() => setShow(true)} 
onMouseLeave={() => setShow(false)}
>link
{show ? <span>span</span> : null }
</Link>
4

React is appending a span if you add it to the JSX, you don’t need to do it’s job for it. You can’t do what you’re doing, JSX isn’t HTML. If you really can’t do this with CSS and pseudo elements, then what you want is a reference to a span (using a ref) to apply the effect to.