Uncaught Invariant Violation using React Bootstrap modal

Question

I started playing around with react recently and I've run into an issue. I have no idea why it's giving me this issue. I've searched on Google and S/O but I'm unable to find the reason why my code is resulting in an error.

I have installed react-bootstrap in my project. I can confirm that this is working as I'm able to load all components without any issue.

In this piece of code however, I'm presented with an 'Uncaught Invariant Violation: addComponentAsRefTo...' error when I add a <Modal/> wrapper around my form (without the wrapper my form works fine).

Here is some of my code (All included in the same component):

handleClick() {
  var foo = this.refs.foo.value;
...

render() {
  var Modal = require('react-bootstrap').Modal;
  return (
    <Modal show={this.state.showModal} onHide={this.close}>
      <div>
        <input ref='foo' />
        <button onClick={this.handleClick}>Submit</button>
      </div>
    </Modal>
  )
}
...

Could anybody please help my understand why I'm getting the 'ref' error when I wrap my form input in a model component?

Answer 1

looking at react bootstrap source code they expect you to wrap the contents using their subcomponents https://react-bootstrap.github.io/components.html#modals-live try this:

<Modal show={this.state.showModal} onHide={this.close}>
  <Modal.Body>
    <div>
      <input ref='foo' />
      <button onClick={this.handleClick}>Submit</button>
    </div>
  </Modal.Body>
</Modal>