CODEWITHSUNDEEP
reactjs
Neil Kelsey
Neil Kelsey

Reputation: 841

Show month number instead of text from month list with React

I have a month list which shows the months as text but what I want to do is return a numeric number value for each month, so January would return '01', February would return '02' and so on ...

So what I've tried to do is give each option list item a prop (monthNumber) numeric value as well as its text value - here's what my list looks like

        <select onChange={this.monthClickHandler.bind(this)}>
            <option selected={this.props.monthNumber == '01'}>January</option>
            <option selected={this.props.monthNumber == '02'}>February</option>
            <option selected={this.props.monthNumber == '03'}>March</option>
            <option selected={this.props.monthNumber == '04'}>April</option>
            <option selected={this.props.monthNumber == '05'}>May</option>
            <option selected={this.props.monthNumber == '06'}>June</option>
            <option selected={this.props.monthNumber == '07'}>July</option>
            <option selected={this.props.monthNumber == '08'}>August</option>
            <option selected={this.props.monthNumber == '09'}>September</option>
            <option selected={this.props.monthNumber == '10'}>October</option>
            <option selected={this.props.monthNumber == '11'}>November</option>
            <option selected={this.props.monthNumber == '12'}>December</option>
        </select>

And in the click handler I am trying to return the values as such

monthClickHandler = (event) => {
    log.debug('Month - Get the month prop - ', this.props.monthNumber);
    log.debug('Month event : ', event);
    log.debug('Month value(): target.value', event.target.value);
}

I can get the text value (January etc) but I can't return the monthNumber prop value ... it just returns undefined

Hopefully that all makes sense, is there something I'm missing here? If anyone can point me in the right direction I'd be very grateful!

Upvotes: 0

Views: 62

Answers (1)

WayneC
WayneC

Reputation: 5740

Add a value to the options, and instead of the selected, add a value to the select:

class Months extends React.Component {
  handleChange(event) {
    console.log(event.target.value);
  }
  render() {
    return (
      <select value={this.props.monthNumber} onChange={this.handleChange}>
        <option value='01'>January</option>
        <option value='02'>February</option>
        <option value='03'>March</option>
        <option value='04'>April</option>
        <option value='05'>May</option>
        <option value='06'>June</option>
        <option value='07'>July</option>
        <option value='08'>August</option>
        <option value='09'>September</option>
        <option value='10'>October</option>
        <option value='11'>November</option>
        <option value='12'>December</option>
      </select>
    );
  }
}

ReactDOM.render(React.createElement(Months), document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<div id='app' />

then in the handler event.target.value will be that value.

See the React docs

Upvotes: 2

Related Questions