Clean LimitSelect component

This commit is contained in:
Pierre Burgy 2017-04-11 18:30:57 +02:00
parent f67b536645
commit 0a7ed38d3f

View File

@ -5,10 +5,16 @@
*/
import React from 'react';
import _ from 'lodash';
import styles from './styles.scss';
class LimitSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
componentWillMount() {
const id = _.uniqueId();
this.setState({ id });
}
getOptionsValues() {
return [{
value: 10,
@ -30,16 +36,20 @@ class LimitSelect extends React.Component { // eslint-disable-line react/prefer-
}
render() {
// Generate options
const options = this.getOptionsValues().map((optionValue) => (
<option value={optionValue.value} key={optionValue.value}>{optionValue.label}</option>
));
// Get id in order to link the `label` and the `select` elements
const id = this.state.id;
return (
<form className="form-inline">
<div className="form-group">
<label className={styles.label} for="sel1">Items per page:</label>
<label className={styles.label} htmlFor={id}>Items per page:</label>
<div className={styles.selectWrapper}>
<select onChange={this.props.onLimitChange} className={`form-control ${styles.select}`} id="sel1">
<select onChange={this.props.onLimitChange} className={`form-control ${styles.select}`} id={id}>
{options}
</select>
</div>