React Bootstrap Validation use validated input in sub component - reactjs

Question

I am using react-bootstrap-validation that decorates the react-bootstrap Input tag.
The ValidatedInput requires that it is inside a Form component.
When I add my ValidatedInput to a custom sub component I get an error saying it needs to be inside a Form which it is, but I guess it is further down the tree now so can not see the Form.
Is there a way of referencing the parent Form so the ValidatedInput can see the parent.
Looking at the source of the Validation lib I can see that the ValidationInput needs to register to the Form but am not sure how to do this from the sub component.
// Parent render
render(){
<Form
className="fl-form fl-form-inline fl-form-large"
name="customer-details"
onValidSubmit={this._handleValidSubmit}
onInvalidSubmit={this._handleInvalidSubmit}
validationEvent='onChange'>
<TitleSelect handleChange={this.updateDropDown} value={this.state.form.title} />
</form>
}
// Sub class containing the ValidatedInput
export class TitleSelect extends React.Component {
static propTypes = {
handleChange: React.PropTypes.func.isRequired,
value: React.PropTypes.string.isRequired
}
render(){
return (
<ValidatedInput
name="title"
label='title'
type='select'
value={this.props.value}
onChange={this.props.handleChange}
groupClassName='form-group input-title'
wrapperClassName='fl-input-wrapper'
validate='required'
errorHelp={{
required: 'Please select a title.'
}}>
<option value="" ></option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Master">Mstr.</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Reverend">Rev.</option>
<option value="Doctor">Dr.</option>
<option value="Professor">Prof.</option>
<option value="Lord">Lord</option>
<option value="Lady">Lady</option>
<option value="Sir">Sir</option>
<option value="Master">Mstr.</option>
<option value="Miss">Miss</option>
</ValidatedInput>
)
}
};

Answer 1

At the moment this is impossible to do. It will be possible in a future release once we get proper parent-based contexts in react and I will migrate the component to contexts. But for now I would recommend to split your render() method to couple of smaller ones and reuse them.

Answer 2

Sa #Ваня Решетников said above it's impossible to do it now because of limitations of current design. A solution I went for is this.
Convert subcomponent to plain JS object
TitleSelect = {
// move prop types to parent
renderTitleSelect(){
...
}
}
Add new object as a mixin to parent and render a function
mixins: [TitleSelect],
...
render() {
<Form ...>
// parentheses are important!
{this.renderTitleSelect()}
</Form>
}