CODEWITHSUNDEEP
javascriptreactjsreact-nativeecmascript-6
Dexter Naru
Dexter Naru

Reputation: 233

React Native - Button onPress not working

I don´t understand why my function is not working when I press the button. No error shows. I also tried onPress={this.loginHandler} and theres a message that says

Warning: Failed prop type: The prop onPress is marked as required in Button, but it´s value is undefined.

Here's my code:

import React, {Component} from 'react';
import { Button} from 'react-native';


export default class AuthScreen extends Component {
  loginHandler = () => {
    console.log('P11');
  }

render() {
    return (
      <View>
          <Button style={styles.btnLogin} title='Iniciá sesión' onPress={this.loginHandler}  style={{flex:1}}/>
      </View>
    );
  }
}

Upvotes: 1

Views: 13931

Answers (3)

rondi
rondi

Reputation: 71

maybe you want to try this

try to change your function like this

import React, {Component} from 'react';
import { Button} from 'react-native';


export default class AuthScreen extends Component {
  loginHandler () {
    console.log('P11');
  }

render() {
    return (
      <View>
          <Button style={styles.btnLogin} title='Iniciá sesión' onPress={this.loginHandler}  style={{flex:1}}/>
      </View>
    );
  }
}

Upvotes: 2

devserkan
devserkan

Reputation: 17608

You can use either:

onPress={() => this.loginHandler()}

or:

onPress={this.loginHandler}

But, the second one is better since it will not be recreated in every render because we are using the reference, not invoking the callback. Here, the problem is you are defining your function outside of your class. So this.loginHandler does not point to your function.

It will work like this:

const loginHandler = () => {
  console.log("P11");
};

export default class AuthScreen extends Component {
  render() {
    return (
      <View>
        <Button
          style={styles.btnLogin}
          title="Iniciá sesión"
          onPress={loginHandler}
          style={{ flex: 1 }}
        />
      </View>
    );
  }
}

You are using an external function here, but probably you don't want this since in the future you will want to use some variables or other methods in your class. So, move it into your class and use this.

export default class AuthScreen extends Component {
  loginHandler = () => {
    console.log("P11");
  };

  render() {
    return (
      <View>
        <Button
          style={styles.btnLogin}
          title="Iniciá sesión"
          onPress={this.loginHandler}
          style={{ flex: 1 }}
        />
      </View>
    );
  }
}


class App extends React.Component {
  loginHandler = () => {
    console.log("P11");
  };

  render() {
    return (
      <div>
        <button title="Iniciá sesión" onClick={this.loginHandler}>Click</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 3

Rutul Patel
Rutul Patel

Reputation: 693

Try this.

Actually, you have to execute the function onPress.

import React, {Component} from 'react';
import { Button} from 'react-native';


export default class AuthScreen extends Component {

  loginHandler = () => {
     console.log('P11');
  }

  render() {
    return (
      <View>
          <Button style={styles.btnLogin} title='Iniciá sesión' onPress={() => this.loginHandler()}  style={{flex:1}}/>
      </View>
    );
  }
}

Upvotes: 4

Related Questions