Uncaught Invariant Violation: addComponentAsRefTo(...) ref error

[tpb-dev]

Hi, is there any way at all to dispatch to the state from a component of a component? If not, what other options do i have? I tried using bindActionCreators as well, but same error. I tried Dan's solution from here, no luck.
I am getting this error whenever I dispatch to the state:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

I have already deleted and reinstalled node_modules, and tried the bootstrap-react library & the reactstrap library, but all give this error.

import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import { changeModalState } from '../actions'

class ModalSelectNewsSources extends React.Component {
  constructor(props) {
    super(props);
    const { dispatch } = this.props
    dispatch(changeModalState(false))
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    const { dispatch, changeModal } = this.props
    dispatch(changeModalState(!changeModal))
  }

  render() {

    var { changeModal } = this.props
    console.log("Rendering now changeModal = " + changeModal)

    return (
      <div>
        <Button color="danger" onClick={this.toggle}>FOREVER</Button>
        <Modal isOpen={changeModal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Save</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

ModalSelectNewsSources.propTypes = {
  changeModal: PropTypes.bool.isRequired,
  dispatch: PropTypes.func.isRequired
}

function mapStateToProps(state) {
   return { changeModal : state.changeModal }
}

export default connect(mapStateToProps)(ModalSelectNewsSources)

[markerikson]

Your code looks fairly reasonable to me. That sort of error seems unlikely to have anything to do with React-Redux and connect. I'd suggest asking this on Stack Overflow, as this is really more of a "usage"-type question.

[gaearon]

I have already deleted and reinstalled node_modules

But have you checked if you have multiple reacts there?
You can run npm ls react to learn that.

[tpb-dev]

Yes, I have done that too, but it didn't work. I suspect that the two underlying implementations of bootstrap components in react are using those refs.... In any case, I guess I will just render plain bootstrap for now.

[gaearon]

File an issue in that project and attach a project reproducing it. This warning almost always means duplicate React but it's impossible to help if you don't show your configuration.