Zero value MenuItem in a Material-UI SelectField with Redux-Form

Question

I'm using a Material-UI SelectField to choose the age. For infants, this means there's a MenuItem with value={0} and key={0}. Problem: the zero is not displayed in the MenuItem:

And it seems that the Redux Form is also left without a value, because the required validation is triggered:

Even more strange, I internationalized the values with react-intl:

  listAges = (personType, ageFrom, ageTo ) => {
    var items = [];
    _.range(ageFrom.get(personType.code), ageTo.get(personType.code)).forEach(function(age) {
      var text = <FormattedMessage
                    id="personType.years"
                    defaultMessage={`{ age, plural, =0 {{age} años} one {{age} año} other {{age} años} } `}
                    values={{ age: age }}
                />
      items.push(<MenuItem key={age} value={age} primaryText={text}/>);
    });

    return items;
  }

And the zero is still not displayed:

In the Material-UI demos (the Long Example), everything seems to work fine with a zero value. I'm using redux-form-material-ui. Could it be a redux-form problem?

I'm using the latest version of these libraries:

"material-ui": "^0.16.4",
"react-intl": "^2.2.3",
"react-redux": "^5.0.2",
"redux": "^3.6.0",
"redux-form": "^6.2.1",
"redux-form-material-ui": "^4.1.2",

Any ideas / workarounds for this?

Answer 1

I think you'll find your problem is not with material-ui, but something with your age variable or FormattedMessage (maybe age is null and being formatted as empty string). Here is a basic example that uses zero for key and value without a problem:

class SelectFieldExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }

  render() {
    const items = [];

    for (let i = 0; i < 5; i++) {
      items.push(
        <MenuItem value={i} key={i} primaryText={`${i} años`} />
      );
    };

    return (
      <SelectField value={this.state.value} onChange={(e, i, v) => this.setState({ value: v }) }>
        {items}
      </SelectField>  
    );
  }
};