48 lines
1011 B
TypeScript
48 lines
1011 B
TypeScript
import {useState} from "../keact/hooks";
|
|
|
|
export function NamesList() {
|
|
const [namesList, setNamesList] = useState([
|
|
"Greg",
|
|
"Elon",
|
|
"Mark",
|
|
"Olaph"
|
|
]);
|
|
|
|
const [newName, setNewName] = useState("");
|
|
|
|
function addNewName() {
|
|
namesList.push(newName);
|
|
setNewName("");
|
|
setNamesList(namesList);
|
|
}
|
|
|
|
function deleteName(index: number) {
|
|
namesList.splice(index, 1);
|
|
setNamesList(namesList);
|
|
}
|
|
|
|
return <div>
|
|
<h1>Names list:</h1>
|
|
<div>
|
|
{namesList.map((n, i) =>
|
|
<div>
|
|
<span>#{i + 1} - {n}</span><button onClick={deleteName.bind(this, i)}>x</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<h2>add to list:</h2>
|
|
<input type="text"
|
|
placeholder="Elon"
|
|
value={newName}
|
|
onInput={(e) => {
|
|
//@ts-ignore
|
|
setNewName(e.target.value)
|
|
}}
|
|
/>
|
|
<button
|
|
disabled={!newName}
|
|
onClick={addNewName}>add</button>
|
|
</div>
|
|
</div>
|
|
} |