Making Widgets Look Nice 1.0

src/components/AddIncome.js

@@ -0,0 +1,54 @@
+import React, { useContext, useState } from 'react';
+import { AppContext } from '../context/AppContext';
+import { v4 as uuidv4 } from 'uuid';
+
+const AddExpenseForm = (props) => {
+	const { dispatch } = useContext(AppContext);
+
+	const [name, setName] = useState('');
+	const [cost, setCost] = useState('');
+
+	const onSubmit = (event) => {
+		event.preventDefault();
+		const expense = {
+			id: uuidv4(),
+			name,
+			cost: parseInt(cost),
+		};
+
+		dispatch({
+			type: 'ADD_EXPENSE',
+			payload: expense,
+		});
+
+		setName('');
+		setCost('');
+	};
+
+	return (
+		<form onSubmit={onSubmit}>
+			<div class='row'>
+				<div class='col-lg-3'>
+					<label for='cost'>Income</label>
+					<input
+						required='required'
+						type='number'
+						class='form-control'
+						id='cost'
+						value={cost}
+						onChange={(event) => setCost(event.target.value)}
+					/>
+				</div>
+			</div>
+			<div class='row mt-3'>
+				<div class='col-sm'>
+					<button type='submit' class='btn btn-primary'>
+						Save
+					</button>
+				</div>
+			</div>
+		</form>
+	);
+};
+
+export default AddExpenseForm;