a small incremental UI library for the web
javascript web ui
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Move input to component

garrison 95b4c59f 24afa94a

+26 -18
+26 -18
demos/todo/todo.tsx
··· 14 14 const [newItemText, setNewItemText] = useState(''); 15 15 16 16 useStyle(` 17 - .container > .foo, .bar, [foo="bar"] { 18 - background-color: red; 19 - border: 1px solid green; 20 - } 21 17 .container { 22 - background-color: orange; 18 + display: flex; 19 + flex-direction: column; 23 20 } 24 21 `); 25 22 26 23 return ( 27 24 <div class="container"> 28 - <div> 29 - <input 30 - onInput={ev => setNewItemText(ev.target.value)} 31 - onKeyDown={ev => { 32 - if (ev.key === 'Enter') { 33 - setItems(items => [...items, newItemText]); 34 - //setNewItemText(''); 35 - } 36 - }} 37 - value={newItemText} 38 - placeholder="Item name" 39 - /> 40 - </div> 25 + <ItemInput addItem={text => setItems(items => [...items, text])} /> 41 26 <div id="items">{items.map(text => <Item text={text} />)}</div> 27 + </div> 28 + ); 29 + } 30 + 31 + function ItemInput({addItem}) { 32 + const [text, setText] = useState(''); 33 + 34 + function submit() { 35 + addItem(text); 36 + //setText(''); 37 + } 38 + 39 + return ( 40 + <div> 41 + <input 42 + onInput={ev => setText(ev.target.value)} 43 + onKeyDown={ev => { 44 + if (ev.key === 'Enter') submit(); 45 + }} 46 + value={text} 47 + placeholder="Item name" 48 + /> 49 + <button onClick={() => submit()}>Add</button> 42 50 </div> 43 51 ); 44 52 }