<div id="root"></div>
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
}
.box {
width: 300px;
h1 {
font-size: 20px;
margin: 0 0 1rem 0;
}
}
View Compiled
import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
const images = [
'https://images.pexels.com/photos/10295057/pexels-photo-10295057.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load',
'https://images.pexels.com/photos/22614123/pexels-photo-22614123/free-photo-of-a-field-of-red-and-yellow-tulips.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
'https://images.pexels.com/photos/23512402/pexels-photo-23512402/free-photo-of-three-candles-on-a-table-with-books.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load',
'https://images.pexels.com/photos/22667947/pexels-photo-22667947/free-photo-of-plant-in-a-hall.jpeg?auto=compress&cs=tinysrgb&w=1200&lazy=load'
]
function App() {
const [image, setImage] = React.useState(0);
return (
<div>
<div>
<button onClick={() => setImage(0)}>1</button>
<button onClick={() => setImage(1)}>2</button>
<button onClick={() => setImage(2)}>3</button>
<button onClick={() => setImage(3)}>4</button>
</div>
<img src={images[image]} />
</div>
)
}
ReactDOM.render(<App />,
document.getElementById("root"))
View Compiled
This Pen doesn't use any external JavaScript resources.