Hi,
I’m trying to use componentDidMount to see a dom element?
console.log( ReactDOM.findDOMNode(this) );
I got an error in the console:
socket.js:110 Uncaught TypeError: Converting circular structure to JSON(…)
import React from 'react'
import ReactDOM from 'react-dom'
class LifeCycleMountingUsage extends React.Component {
constructor(){
super()
this.state = {
count: 0
}
this.update = this.update.bind(this)//attach bind(this) to the method update()
}
update = () => {
this.setState({count: this.state.count+1});
}
componentWillMount () {//before the component is mounted in DOM
console.log('componentWillMount')
this.setState({ m : 2});
}
render() {
console.log('render');
return (
<div>
<button onClick={this.update} className='button'>
{ this.state.count * this.state.m }
</button>
</div>
);
}
componentDidMount () {//the component been mounted to the DOM
console.log('componentDidMount')
console.log( ReactDOM.findDOMNode(this) );
}
componentWillUnmount () {//unmount the component
console.log('componentWillUnmount')
}
}
class Wrapper extends React.Component {
mount = () => {
ReactDOM.render(<LifeCycleMountingUsage />, document.querySelector('#a') )
}
unmount = () => {
ReactDOM.unmountComponentAtNode(document.querySelector('#a') )
}
render() {
return (
<div>
<button onClick={()=> this.mount()} className='button'>Mount</button>
<button onClick={this.unmount.bind(this)} className='button'>Unmount</button>
<div id='a'></div>
</div>
);
}
}
export default Wrapper