start .
me .
HTML Document File : lists.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lists in React</title>
</head>
<body>
<!-- Title: Lists -->
<!-- Description: Lists in React -->
<!-- Keywords: react, lists, map, key, array, items, value, id, element, render, container, ul, li, button, onclick, prompt, addItem -->
<!--
{
items.map(
item => (
<input key={item.id} value={item.value} />
)
)
}
-->
<!-- // npx browser-sync start --server --files "./*.html" --no-open --no-notify --directory -->
<!-- index.html -->
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root')
//const element = <div className="container">Hello World</div>
let id = 1
const items = [
{ id: id++, value: 'Hello' },
{ id: id++, value: 'World' },
{ id: id++, value: 'React' },
{ id: id++, value: 'List' }
]
const element = () => (
<div className="container">
<h1>Items</h1>
<ul>
{items.map(
item => (
<li key={item.id}>{item.value}</li>
)
)}
</ul>
</div>
)
ReactDOM.render(element(), rootElement)
function addItem(itemValue) {
items.push({ id: id++, value: itemValue })
ReactDOM.render(element(), rootElement)
}
addItem('New Item')
</script>
<button onclick="addItem(prompt('item to add'))">Add Item</button>
<hr>
<script src="/web/show-source.js"></script>
</body>
</html>