Embed does not update on re-render after src property changes

[stackptr]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

There is a component which renders a child <embed>. The src property is retrieved from an endpoint and depends on the props passed to the component. When the property changes on an existing <embed>, the contents of that embed does not change. To fix, the component has to entirely replace the <embed> with something else (for instance, a loading state), and then put a new <embed> with the updated src.

I've reproduced this on jsfiddle, below. Two trivia jsfiddles are referred to by the embed, but transitioning by clicking a button does not update the embed despite the property being visibly updated in the DevTools.

https://jsfiddle.net/n5u2wwjg/33890/

What is the expected behavior?

When the src of the <embed> changes, the content should change with it.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Reproduced on 16.2.0, unclear which version jsfiddle is using.

Version 65.0.3325.181, macOS 10.13.4 Beta (17E190a)

[gaearon]

Have you verified this problem only exists in React and isn’t a DOM issue?

[gruszks]

Your are not able to change the src of already rendered embed element.

$('embed').src = 'https://jsfiddle.net/hh11g50z/embedded/result';

Above plaing JS code will not change the content of embed object. I think the solution is to fully recreate embed object with new src.

[aweary]

I think the solution is to fully recreate embed object with new src.

A workaround that accomplishes this without loading states would be to set a key on the embed with the source.

<embed src={this.state.src} key={this.state.src} />

[gaearon]

Closing as this is how the DOM works (and you can force React to recreate the element by using keys).

[soubhikchatterjee]

This is a browser issue, so you need to programmatically refresh the iframe's content on useEffect()

document.getElementById("iframe").contentDocument.location.reload(true);