marquee of react

MarqueeMessage.jsx

import React, { Component } from 'react'
import $ from 'jquery'
import nl2br from 'react-nl2br'

export default class MarueeMessage extends Component {
  autoScrollStart() {
    $("div.maruee").css('position', 'relative')
    let text_height = $("div.maruee p#first").height()
    if (text_height > $("div.display-area").height()) {
      if (!$('div.maruee').is(':animated')) {
        $("div.maruee").css('top', 0)
        $("div.maruee p#second").show()
        $('div.maruee').animate(
          {
            top : -(text_height+30)
          },
          {
            duration: (text_height) * 60,
            easing: 'linear',
            complete: () => {this.autoScrollStart()}
          }
        )
      }
    } else {
      $("div.maruee").stop().css('top', '')
      $("div.maruee p#second").hide()
    }
  }

  componentDidMount() {
    this.autoScrollStart()
  }

  componentDidUpdate(prevProps, prevState) {
    this.autoScrollStart()
  }

  componentWillUnmount() {
    $("div.maruee").stop().css('top', '')
  }

  render() {
    const { messages } = this.props
    return(
      <div className="display-area" style={{overflow: 'hidden'}}>
        <div className="maruee">
          <p id="first">
            {nl2br(messages)}
          </p>
          <p id="second" style={{marginTop: 30}}>
            {nl2br(messages)}
          </p>
        </div>
      </div>
    )
  }
}