Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Invariant Violation: Argument appears to not be a ReactComponent

I need to find the offsetLeft of a component.

componentDidMount(){
        var tesNo =ReactDOM.findDOMNode(this.refs.dropDown.refs.input.offsetLeft)

    }
<ReactAutocomplete
    ref="dropDown"
   /*.......*/
/>

While debugging I get the value of the variable tesNo .After that I am getting this error:

Consider adding an error boundary to your tree to customize error handling behavior. Visit this site to learn more about error boundaries. Invariant Violation: Argument appears to not be a ReactComponent

How to solve this error?

like image 425
Jane Fred Avatar asked Mar 01 '19 06:03

Jane Fred


1 Answers

Found the answer by myself.

Since I am using react version: "^16.3.2" , I used createRef() API.

class Patient extends React.Component{
constructor(props){
    super(props)
    this.state = {
      postn:0
    }
this.dropDown=React.createRef()
}
componentDidMount(){
    let left = this.dropDown.current.refs.input.offsetLeft;
        this.setState({postn:left})
}
<ReactAutocomplete
    ref={this.dropDown}
   /*.......*/
/>
}
like image 52
Jane Fred Avatar answered Oct 04 '22 05:10

Jane Fred