Skip to content

Instantly share code, notes, and snippets.

@a-m-dev
Created July 15, 2018 14:43
Show Gist options
  • Save a-m-dev/d64ed1d84286f788195c0226243bde2d to your computer and use it in GitHub Desktop.
Save a-m-dev/d64ed1d84286f788195c0226243bde2d to your computer and use it in GitHub Desktop.
const AddDayForm = ({ resort, date , powder, backcountry }) => {
let _resort , _date , _powder , _backcountry
const handleSubmit = (e) => {
e.preventDefault()
const formValues = {
resort: _resort.value,
date: _date.value,
powder: _powder.checked,
backcountry: _backcountry.checked
}
console.log(formValues)
}
return(
<form className="add-day" onSubmit={handleSubmit}>
<label htmlFor="resort">Resort Name</label>
<input
id='resort'
type='text'
defaultValue={resort}
required
ref={ input => _resort = input}
/>
<label htmlFor="date">Date</label>
<input
id='resort'
type='date'
defaultValue={date}
required
ref={ input => _date = input}
/>
<div>
<input
id='powder'
type="checkbox"
defaultChecked={powder}
ref={input => _powder = input} />
<label htmlFor="powder"> powder Day </label>
</div>
<div>
<input
id='backcountry'
type="checkbox"
defaultChecked={backcountry}
ref={ input => _backcountry = input}/>
<label htmlFor="backcountry"> Backcountry Day </label>
</div>
<button>Add Day</button>
</form>
)
}
AddDayForm.defaultProps = {
resort: 'KirkWood',
date: '2017-02-12',
powder: true,
backcountry: false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment