Code Review Stack Exchange is a question and answer site for peer programmer code reviews. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a really simple form with 3 select boxes for days, hours, and minutes (in the full code I have a submit button attached to an ajax request). And I've got each of those select boxes attached to their own onChange function. But in light of simplicity and dryness, could I do better?

class FutureUpgradeForm extends React.Component {
  constructor(props) {
    super(props)
      days: this.props.days,
      hours: this.props.hours,
      minutes: this.props.minutes
    }   
  }

  handleDaySelect(e) {
    this.setState({
      days: e.target.value
    })
  }

  handleHourSelect(e) {
    this.setState({
      hours: e.target.value
    })
  }

  handleMinuteSelect(e) {
    this.setState({
      minutes: e.target.value
    })
  }

  render() {
    return(
      <div>
        <select value={this.state.days} onChange={this.handleDaySelect.bind(this)}>
          <option value="0">0 Days</option>
          <option value="1">1 Day</option>
        </select>
        <select value={this.state.hours} onChange={this.handleHourSelect.bind(this)}>
          <option value="0">0 Hours</option>
          <option value="1">1 Hour</option>
        </select>
        <select value={this.state.minutes} onChange={this.handleMinuteSelect.bind(this)}>
          <option value="0">0 Minutes</option>
          <option value="1">1 Minute</option>
        </select>
      </div>
    )
  }
}
share|improve this question
    
At risk of saying "drop this and use jQuery instead", I would recommend you don't use state at all and instead just use props. setState will make your head spin with moderately complex forms. – Dan Pantry Mar 16 at 16:30
    
@DanPantry That's kind of what I'm finding out, but how would I use props? I'm also open to an answer using jquery. – thedanotto Mar 16 at 19:57
    
You'd probably have to use a 3rd party library like formsy-react or create a very similar interface. – Dan Pantry Mar 17 at 16:45

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.