added initializers and select example

README.md

@@ -4,6 +4,9 @@ A fork of the code from this tutorial for building this project can be found ove
 Changes:
   - replaced Bulma with [rbx](https://dfee.github.io/rbx) components
   - incorporated suggestions from comments section on simplifying usage and avoiding a uncontrolled to controlled error
-  - added support for checkboxes, with example
+  - added optional second argument for initializating fields
+  - added support for checkboxes
+  - added select example with initialization
+  - added checkbox example
 
 ![A login form built in React and rbx, using custom React Hooks to power the form](./screenshot.png?raw=true)

src/Form.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import "rbx/index.css";
-import { Button, Checkbox, Column, Container, Control, Field, Input, Label, Section } from 'rbx';
+import { Button, Checkbox, Column, Container, Control, Field, Input, Label, Section, Select } from 'rbx';
 import useForm from "./useForm";
 
 const Form = () => {
-  const [ values, handleChange,] = useForm(['email', 'password', 'human']);
+  const [values, handleChange] = useForm(
+    ['email', 'password', 'human', 'homeworld'],
+    { homeworld: 'Earth' },
+    );
 
   function login(event) {
     event.preventDefault();
@@ -30,14 +33,30 @@ const Form = () => {
               <Field>
                 <Control>
                   <Label>
-                    <Checkbox name="human" onChange={handleChange} checked={values.human} />
+                    <Checkbox id="human" name="human" onChange={handleChange} checked={values.human} required />
                     I am not a robot.
                   </Label>
                 </Control>
               </Field>
               <Field>
                 <Control>
-                  <Button type="submit" color="primary" disabled={!values.human}>Submit</Button>
+                  <Select.Container>
+                    <Select name="homeworld" onChange={handleChange} value={values.homeworld}
+                      required pattern="">
+                      <Select.Option value=''>Homeworld...</Select.Option>
+                        {
+                          ['Mercury', 'Venus', 'Mars', 'Earth', 'Jupiter', 
+                           'Saturn', 'Neptune', 'Uranus'].map(w => (
+                            <Select.Option key={w} value={w}>{w}</Select.Option>
+                           ))
+                        }
+                    </Select>
+                  </Select.Container>
+                </Control>
+              </Field>
+              <Field>
+                <Control>
+                  <Button type="submit" color="primary" >Submit</Button>
                 </Control>
               </Field>
             </form>

src/useForm.js

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 
-const useForm = (names) => {
+const useForm = (names, inits) => {
 
   const [values, setValues]
-  = useState(names.reduce((obj, name) => ({...obj, [name]: ''}), {}));
+  = useState(names.reduce((obj, name) => ({...obj, [name]: (inits || {})[name] || ''}), {}));
 
   const handleChange = (event) => {
     const { name, value, type, checked } = event.target;