Font awesome in button

Back End Help
#1

Tell us what’s happening:

I want when I click the button, state.text will be reset to the empty string. But when I click to the area of font awesome, it’s not working. Help me, please!!!

This is my project http://pauker.freevnn.com/

Your code so far

handleClick = event => {
	if (event.target.value === 'clear') 
		this.setState({ text: '' });
}
render() {
return (
   <button type="button" id="clear" value="clear" 
   onClick={this.handleClick}>
	<span className="fas fa-arrow-left" />
   </button>
)

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) coc_coc_browser/80.0.180 Chrome/74.0.3729.180 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects/build-a-javascript-calculator

#2

hi @paukerspinner, it reminds me something I had to tackle during the D3 challange.
Give this css property to the span of the fontawesome icon:
pointer-events: none;
If you want to do the inline css with React you have to do this:

<span className="fas fa-arrow-left" style={{pointerEvents: "none"}}/>

I can’t guarantee that it works, but it’s worth a try.

#3

You must have figured it out? It works for me with Safari. It worked like a delete button.

#4

thank you so much, it was working by using your method

#5

I don’t know, I use Goggle Chrome. All right, this problem was solved with <span className="fas fa-arrow-left" style={{pointerEvents: "none"}}/>