Skip to content

Instantly share code, notes, and snippets.

@michaelmcshinsky
Last active October 18, 2019 12:27
Show Gist options
  • Save michaelmcshinsky/c8050694db3928618f9bd66915ef3500 to your computer and use it in GitHub Desktop.
Save michaelmcshinsky/c8050694db3928618f9bd66915ef3500 to your computer and use it in GitHub Desktop.
import React, { useState } from 'React';
export function Form() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const handleSubmit = event => {
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<fieldset>
<div>
<label htmlFor='formName'>Name:</label>
<input
id='formName'
name='name'
type='text'
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div>
<label htmlFor='formEmail'>Email:</label>
<input
id='formEmail'
name='email'
type='text'
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
</fieldset>
<button type='submit'>Submit</button>
</form>
);
}
import React, { useState } from 'React';
const FORM_DEFAULT = {
name: '',
email: ''
};
export function Form() {
const [form, setForm] = useState(FORM_DEFAULT);
const handleForm = event => {
form[event.target.name] = event.target.value;
setForm(form);
};
const handleSubmit = event => {
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<fieldset>
<div>
<label htmlFor='formName'>Name:</label>
<input
id='formName'
name='name'
type='text'
value={form.name}
onChange={handleForm}
/>
</div>
<div>
<label htmlFor='formEmail'>Email:</label>
<input
id='formEmail'
name='email'
type='text'
value={form.email}
onChange={handleForm}
/>
</div>
</fieldset>
<button type='submit'>Submit</button>
</form>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment