From 89d65382788d6d65bb752815a900989a60d6c947 Mon Sep 17 00:00:00 2001
From: JuanMa Garrido <juanma.garrido@gmail.com>
Date: Fri, 30 Aug 2024 13:50:10 +0200
Subject: [PATCH] useRef approach to change src of iframe

---
 _app/src/HomePage.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/_app/src/HomePage.js b/_app/src/HomePage.js
index 27f63ec9..d368b665 100644
--- a/_app/src/HomePage.js
+++ b/_app/src/HomePage.js
@@ -1,6 +1,6 @@
 import { useSearchParams } from 'react-router-dom';
 import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { getItemsForFilter } from './utils';
 import './styles.scss';
 
@@ -130,7 +130,7 @@ const DEFAULT_VIEW = {
 const Examples = () => {
 	const [ searchParams, setSearchParams ] = useSearchParams();
 	const [ activeLayout, setActiveLayout ] = useState();
-	const [ selectedExample, setSelectedExample ] = useState();
+	const iframeRef = useRef( null );
 	const [ filterTags, setFilterTags ] = useState( () => {
 		try {
 			return searchParams.get( 'tags' ) || '';
@@ -177,7 +177,9 @@ const Examples = () => {
 		setView( newView );
 	};
 	const onChangeSelection = ( [ selectedExampleSlug ] ) => {
-		setSelectedExample( selectedExampleSlug );
+		const selectedExamplePlaygroundDemoUrl = `https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/${ selectedExampleSlug }/_playground/blueprint.json`;
+		iframeRef.current.contentWindow.location.href =
+			selectedExamplePlaygroundDemoUrl;
 	};
 
 	useEffect( () => {
@@ -221,15 +223,13 @@ const Examples = () => {
 						<_DataViews />
 					</div>
 					<div className="iframeContainer">
-						{ selectedExample ? (
-							<iframe
-								src={ `https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/${ selectedExample }/_playground/blueprint.json` }
-								title="Example Iframe" // Title for accessibility
-								loading="lazy" // Optional: Defer loading the iframe until it is visible
-							/>
-						) : (
-							<p>👈 Select an example to view the demo</p>
-						) }
+						<iframe
+							ref={ iframeRef }
+							src={ `https://playground.wordpress.net` }
+							title="Example Iframe" // Title for accessibility
+							loading="lazy" // Optional: Defer loading the iframe until it is visible
+							id="myIframe"
+						/>
 					</div>
 				</div>
 			) : (