CODEWITHSUNDEEP
javascriptreactjsweb-componentcustom-element
Aaronius
Aaronius

Reputation: 4953

Modifying attributes from within custom element inside React

I have a custom element being used inside React. I want to be able to change attributes on the element from React. I also want to be able to change the same attributes from inside the element itself. Unfortunately, when the element changes its own attribute, this causes some odd side effects that I believe are related to React's virtual DOM being unaware that the attribute has changed.

To illustrate, assume we have a React render function that returns the following:

<my-component foo="bar"/>

And my-component has logic inside of it that, when the element is clicked, will change foo's value from bar to unicorn. Everything up to this point works as expected. The problem is that during the next render cycle, foo is not set back to bar. I want foo to be set back to bar.

My guess is that React's virtual DOM has bar as the cached value (it doesn't realize it has changed to unicorn) and therefore doesn't attempt to set it back to bar.

  1. Is my understanding correct?
  2. How do I make it so foo's value is set back to bar on the next render cycle?

Upvotes: 0

Views: 132

Answers (1)

David Tang
David Tang

Reputation: 93664

You are correct about the virtual DOM. To make it behave the way you want, the custom element needs to be written in a way that supports it.

Think of this as being equivalent to controlling an <input>, where you would bind a handler to the input's onChange and either call event.preventDefault() to block any changes to the vlaue, or pass the new value back to the <input> to update the virtual DOM.

Therefore for this to work, the custom element needs to support a similar event handler.

Upvotes: 1

Related Questions