JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

CSS

button {
  font-size: 24px;
  margin: 4px;
}

JavaScript

import { html, render, useState } from "https://unpkg.com/htm/preact/standalone.module.js";

function App() {
	const [numbers, setNumbers] = useState([1, 2, 3, 4]);

	const setNum = (index, value) => {
  	setNumbers([
    	...numbers.slice(0, index),
      value,
      ...numbers.slice(index + 1)
    ]);
  }
  
  const useNum = (index) => {
  	setNum(index, Math.floor(Math.random() * 10) + 1);
  }

	return html`
  	<div>
    	${numbers.map((num, index) => html`
      	<button onClick=${() => { useNum(index); }}>${num}</button>
      `)}
    </div>
  `;
}

render(html`<${App} />`, document.body);