Add attribute inside HTML elements of a React component

Question

Suppose I have a React component without the capability of changing its source code. This component, lets say <Demo /> renders a lot of <a> ...<a/> HTML elements. Is it possible to add an attribute inside those elements programmatically and how?

Well, you could always put a wrapper around it and hack the DOM yourself in a useLayoutEffect, or if it's an npm package, patch-package. — cbr
– cbr, Commented May 27, 2020 at 16:08

Rafael Buzatto de Campos · Accepted Answer · 2020-05-27 17:17:59Z

2

you could use a wrapper where you create a reference for the wrapper tag. with that you could query for specific elements and change its attributes accordingly:

const wrapperComponent = props => {
  const myRef = React.createRef()

  useEffect(() => {
    myRef.current.querySelector("a").innerText = "got changed!"
  }, [myRef])

  return (
    <div ref={myRef}>
      <Component {...props} />
    </div>
  )
}

answered May 27, 2020 at 17:17

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Unknown developer Over a year ago

Why myRef.current equals null?

Rafael Buzatto de Campos Over a year ago

My guess is that you added the ref to the Component directly instead of a wrapping tag, and if that's the case is not going to work.

Collectives™ on Stack Overflow

Add attribute inside HTML elements of a React component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related