React Bootstrap Validation use validated input in sub component

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>
        )
    }
};

Look at inspector to get a clue as to how react is parsing your components. That should give you a start. — J. Mark Stevens
– J. Mark Stevens, Commented Sep 1, 2015 at 17:27

Ivan Reshetnikov · Accepted Answer · 2015-09-03 13:10:28Z

3

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.

answered Sep 3, 2015 at 13:10

Ivan Reshetnikov

312 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GreenAsJade Over a year ago

Any progress on "migrating components to contexts"? In the mean time, could you illustrate your recommendation with a code example? I can't really fathom how to solve the problem by "splitting render()"

Ivan Reshetnikov Over a year ago

Currently there's no ETA on that feature, sorry. As to splitting render() method, consider following example: github.com/react-bootstrap/react-bootstrap/blob/master/src/…

Mike Szyndel · Accepted Answer · 2015-09-04 12:09:00Z

2

+50

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>
}

answered Sep 4, 2015 at 12:09

Mike Szyndel

10.6k11 gold badges51 silver badges64 bronze badges

5 Comments

Will Over a year ago

Thanks, I did hear that mixins will be removed at some point so dont want to go down that route. Think I will just move my inputs out of sub components until we can get context introduced.

Mike Szyndel Over a year ago

I can't see a mention of mixins being removed anywhere (that would be strange to be honest because such mechanism is necessary) and switch to contexts may take a loooong time

Will Over a year ago

Read this article about it medium.com/@dan_abramov/… the author did also mention it in his talk at react Europe. Think I might not use sub components until we can get context sorted.

GreenAsJade Over a year ago

Any progress on this? I read the linked articles, and found it hard to understand how I would use what is describe there to solve this problem.

Will Over a year ago

I did end up using something like the mixin shown in the answer

Collectives™ on Stack Overflow

React Bootstrap Validation use validated input in sub component

2 Answers 2

2 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related