Maximum update depth exceeded on render using Select inside other component

[dlgarciabr]

This error occurs when default Select component from 'react-validation/build/select.js' is mounted inside other component in Form

version: react-validation: 3.0.7

The container component LabelAndSelect

const required = (value) => { if (!value.toString().trim().length) { return <span className="form-error is-visible">Campo requerido; } };

class LabelAndSelect extends Component { constructor(props) { super(props); this.state = {}; }

componentWillMount() {}

componentWillReceiveProps(nextProps) {}

render() { const placeholder = this.props.placeholder ? this.props.placeholder : 'Choose...'; const { name, label, cols, readOnly } = this.props; const validations = []; this.props.required && validations.push(required);

return (
  <Grid cols={cols}>
    <div className="form-group">
      <label htmlFor={name} style={{ width: '100%' }}>
        {label}
        <Select
          name={name}
          validations={validations}
          className={`form-control ${toCssClasses(cols)}`}
          readOnly={readOnly}
          value=""
        >
          <option value="">{placeholder}</option>
          {this.props.options.map((option) => <option value={option.key}>{option.value}</option>)}
        </Select>
      </label>
    </div>
  </Grid>
);

} } export default LabelAndSelect;

The Form:

    <Form>
      <div className="box-body">
        <LabelAndSelect
          label="Test"
          name="test"
          required={true}
          cols="6 12"
          options={[ { key: 1, value: '1' }, { key: 2, value: '2' } ]}
        />
      </div>
      <Button onClick={this.handleClick}>Submit</Button>
    </Form>

[jeshio]

+1

[fittyCent]

Somehow this happens when I return react-validation's Select from a dumb component I create. I copied and pasted the Select component from the example directly into my jsx and it worked. But when I use a dumb component that doesn't do anything but return the same Select, it triggers that maximum update depth problem.

[stokedout]

Same here. Shame this library doesn't work - I quite like the way it's used.

[veewee]

For what it's worth : adding useMemo() and useCallback() around pretty much every property and children resolves the issue. It would be better of this package takes better care of it though.