File size: 1,700 Bytes
050d2e1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import { useState } from 'react';
import PropTypes from 'prop-types';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
export function AddItemForm({ onNewItem }) {
const [newItem, setNewItem] = useState('');
const [submitting, setSubmitting] = useState(false);
const submitNewItem = (e) => {
e.preventDefault();
setSubmitting(true);
const options = {
method: 'POST',
body: JSON.stringify({ name: newItem }),
headers: { 'Content-Type': 'application/json' },
};
fetch('/api/items', options)
.then((r) => r.json())
.then((item) => {
onNewItem(item);
setSubmitting(false);
setNewItem('');
});
};
return (
<Form onSubmit={submitNewItem}>
<InputGroup className="mb-3">
<Form.Control
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
type="text"
placeholder="New Item"
aria-label="New item"
/>
<Button
type="submit"
variant="success"
disabled={!newItem.length}
className={submitting ? 'disabled' : ''}
>
{submitting ? 'Adding...' : 'Add Item'}
</Button>
</InputGroup>
</Form>
);
}
AddItemForm.propTypes = {
onNewItem: PropTypes.func,
};
|