Stateless Component and (callback) Refs

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
}