React-Native Button onPress not working

Question

I'm trying to bind the function handleClick to my button onPress. But it's not working. When I refresh the page, I get the alert without clicking on the button and after I close the alert and click on the button, nothing happens.

My Code is:

class ActionTest extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      thename: 'somename'
    };
  }

  handleClick(){
    alert('Button clicked!');
  }

    render(){
      return(
        <View>
          <Button
           onPress={this.handleClick()}
           title="Click ME"
           color="blue"
          />
        </View> 
        );
    }
}

I'm also getting the warning :

What am I doing wrong?

Answer 1

First you define your click handler as an arrow function. In this way you don't need to bind the function anymore. Your function will be like this:

handleClick = () => {
    alert('Button clicked!');
}

Then use this function in the <Button> tag like this:

<Button
 onPress={this.handleClick}
 title="Click ME"
 color="blue"
/>

Answer 2

You are calling handleClick when it renders as you have onPress={this.handleClick()}

try onPress={this.handleClick} instead, to pass it the function as a callback.