Lifecycle mounting - React

Lifecycle mounting - React
0.0 0

#1

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

#2

This part is confusing. ReactDOM.render inside a component :thinking:


#3

well it works?
I was starting React this week, I mount the component LifeCycleMountingUsage in the “a element”, because I’m in an other component.

Edit:
I did this tutorial:


#4

Hmm, interesting.

I noticed that in tutorial they didn’t use arrow functions, but you did.