Describe the bug
The SandBox component from the @wordpress/components package is not re-rendered when the injected html prop changes.
To reproduce
playground/src/index.js:import { render, useState, Fragment } from '@wordpress/element';
import { SandBox, SelectControl } from '@wordpress/components';
import './style.scss';
import '@wordpress/components/build-style/style.css';
function App() {
const [ fruit, setFruit ] = useState( 'Bananas' );
const html = `<div>Selected fruit: <strong>${ fruit }</strong>!</div>`;
return (
<Fragment>
<SelectControl
label="Fruit"
value={ fruit }
options={ [
{ label: 'Bananas', value: 'Bananas' },
{ label: 'Oranges', value: 'Oranges' },
{ label: 'Apples', value: 'Apples' },
] }
onChange={ ( value ) => { setFruit( value ) } }
/>
<SandBox html={ html } />
</Fragment>
);
}
render(
<App />,
document.querySelector( '#app' )
);
npm run playground:start.http://localhost:1234.Expected behavior
The selected fruit text displayed below the fruit selector should be updated after selecting any other fruit, but it keeps unchanged:
Screenshots

Sounds like a duplicate of #16612.
Can you test #16669 to see if that fixes the issue?
Sounds like a duplicate of #16612.
Can you test #16669 to see if that fixes the issue?
I don't think it's related to #16612. I verified I can still reproduce the issue with #16669.
Seems to be more a problem on how the SandBox component is implemented. The render function doesn't use at all the html prop, which is why any change to that prop doesn't trigger any update. The html prop is only used on trySandbox, but that method is only called after the SandBox component has been already rendered.
Most helpful comment
I don't think it's related to #16612. I verified I can still reproduce the issue with #16669.
Seems to be more a problem on how the
SandBoxcomponent is implemented. Therenderfunction doesn't use at all thehtmlprop, which is why any change to that prop doesn't trigger any update. Thehtmlprop is only used ontrySandbox, but that method is only called after theSandBoxcomponent has been already rendered.