onClick in button tag is not working in react component

hi i am a newbie in react i am facing a issue in classbased component
given below is my component which i am calling inside another component of react i just want to call the temp function when onClick gets fired but in my case it is not working please let me know where i am doing wrong?

import react from 'react'
import '../../../css/classBased/editor/textFieldForEditor.css'
import addTextField from './leftTrayIconsForEditor'
class TextField extends react.Component {
    
    temp() {
        console.log('hi there')
    }
    render(){
        return (
            <div className='textfield_parent_container'>
          <div>
          <center>
          <div>
          <button onClick={()=> {this.temp()}}>
          <i className="material-icons md-18">article</i>
          </button>
          <button>
          <i className="material-icons md-18">image</i>
          </button>
          <button>
          <i className="material-icons md-18">movie</i>
          </button>
          </div>
          </center>
          </div>
          <textarea className='text' id={`textfield${this.props.widgetNumber}`}></textarea>
          <div className='utilitytrayouter'>
          <center>
          <div className='temp'>
          <button>
          <i className="material-icons md-18">article</i>
          </button>
          <button>
          <i className="material-icons md-18">image</i>
          </button>
          <button>
          <i className="material-icons md-18">movie</i>
          </button>
          </div>
          </center>
          </div>
          </div>
        )
    }
}
export default TextField;