List of Items
Functional Component
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
const { useState } = React;
function ListOfItems() {
const [items, setItems] = useState([
{ itemName: 'item 1', quantity: 1, isSelected: false },
{ itemName: 'item 2', quantity: 3, isSelected: true },
{ itemName: 'item 3', quantity: 2, isSelected: false },
]);
return (
<div className='item-list'>
<table style={{'background-color': '#D6EEEE'}}>
<thead>
<tr>
<th style={{ 'width': '100px', 'text-align': 'left'}}>Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{items && items.map(item =>
<tr key={item.itemName}>
<td>{item.itemName}</td>
<td style={{ 'text-align': 'right' }}>{item.quantity}</td>
</tr>
)}
</tbody>
</table>
</div>
);
};
ReactDOM.render(<ListOfItems/>, document.getElementById('app'));
</script>
</body>
</html>
© 2024 Better Solutions Limited. All Rights Reserved. © 2024 Better Solutions Limited TopPrevNext