React JavaScript

Using Shared State

This JavaScript program demonstrates how to use shared state in React.

SharedStateReact.html

<!DOCTYPE html>
	<html>
	<head>
		<title>XoaX.net's Javascript React</title>
		<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
		<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
		<script type="importmap">
			{
				"imports": {
					"react": "https://esm.sh/react?dev",
					"react-dom/client": "https://esm.sh/react-dom/client?dev"
				}
			}
		</script>
		<script type="text/babel" data-type="module" src="SharedStateReact.js"></script>
	</head>
	<body>
		<div id="idRoot"></div>
	</body>
</html>

SharedStateReact.js

// This requires a web service.
import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import { useState } from 'react';

function CounterButton({ iCount, IncreaseCount }) {
	return (<button onClick={IncreaseCount}>{iCount} Clicks</button>);
}

let App = function SharedCount() {
	const [iCount, SetCount] = useState(0);
	
	function IncreaseCount() {
		SetCount(iCount + 1);
	}

	return <div>
		<h1>Counting Buttons</h1>
		<CounterButton iCount={iCount} IncreaseCount={IncreaseCount} />
		<CounterButton iCount={iCount} IncreaseCount={IncreaseCount} />
		<CounterButton iCount={iCount} IncreaseCount={IncreaseCount} />
	</div>;
}

const root = createRoot(document.getElementById('idRoot'));
// App Specifies where to put the return value.
root.render(
	<StrictMode>
		<App />
	</StrictMode>
);
 

Output

 
 

© 2007–2026 XoaX.net LLC. All rights reserved.