Returning a List

This JavaScript program demonstrates how to return a list in React.

ListReact.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="ListReact.js"></script>
	</head>
	<body>
		<div id="idRoot"></div>
	</body>
</html>

ListReact.js

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


const kqaPersons = [
	{ sName: 'Father', bIsHuman: false, iID: 1 },
	{ sName: 'Son', bIsHuman: true, iID: 2 },
	{ sName: 'Holy Spirit', bIsHuman: false, iID: 3 }
];

let App = function Trinity() {
	// The key is required for React lists
	const qaUnorderedList = kqaPersons.map(qPerson =>
		<li key={qPerson.iID}
			style={{color: (qPerson.bIsHuman ? 'black' : 'gray') }}>
			{qPerson.sName}
		</li>	
	);
	return <ul>{qaUnorderedList}</ul>;
}

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

React JavaScript

Returning a List

ListReact.html

ListReact.js

Output