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;
It actually works and clicking the first article button really calls console.log('hi there'). Proving the error message could be helpful.
But since you are using Class components most likely you are facing the Handling Events "problem" and what you need is to bind your temp method to TextField component. The easiest way (but may require a Babel plugin depending on your setup) is by using the arrow function:
temp = () => {console.log('hi there')}