Smooth behavior

smooth_behavior.jsx

export default class extends Component {
  constructor (props) {
    super(props)
    this.element = null
  }
  componentDidMount = () => {
    this.element = document.getElementById(this.props.className)
  }
  changeHeight = () => {
    this.element.scrollIntoView({behavior: 'smooth'})
  }
  render() {
    return(
      <div 
        className={`home-role ${this.props.className}`}
        id={this.props.className}
        onClick={this.changeHeight}
        >
        <img
          src={this.props.imgUrl}
          alt=""
        />
        <div className="home-role-card">
          <h1>{this.props.title}</h1>
          <div className="home-role-card-content">
            <div className="home-role-p-container">
              <p>
                {this.props.text}
              </p>
            </div>
            <SindyButton>SHOW ME</SindyButton>
          </div>
        </div>
      </div>
    )
  }
}