react native - undefined is not an object(evaluating 'password.toString')





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















So, basically, I have two JavaScript files, in one of them there's a function that authenticates to an API and the other one is the login screen running in the emulator. When I try to authenticate, I get the error:



undefined is not an object (evaluating 'password.toString')


This is the login screen file:






import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import styles from './login-styles';
import {auth} from '../../fetches/auth';

class LoginBox extends Component {
constructor(props) {
super(props)

this.state = {
username: '',
password: ''
}
}

render = () => {
return(
<View style={styles.box}>
<View style={styles.header}>
<Text style={{fontSize: 28}}>Bem-vindo ao PostBag v 0.0.2</Text>
</View>

<View styles={styles.app}>
<TextInput style={styles.square}
keyboardType="numeric"
placeholder='Insira sua matrúcla'
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
/>
<TextInput style={styles.square}
secureTextEntry
placeholder='Insira sua senha'
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
/>

<TouchableOpacity
style={styles.button}
onPress={() => auth((this.state.username, this.state.password))}
>
<Text style={styles.buttonTxt}>POST</Text>
</TouchableOpacity>
</View>
</View>
)
}
}

export default LoginBox;





This is the authentication function:






import {Alert} from 'react-native';

export function auth(username, password) {
fetch('https://suap.ifrn.edu.br:443/api/v2/autenticacao/token/',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-csrftoken': 'NDML6yy6HgTUIoypfWMZHMKZ32lgJf5PsNolVnLgewanw5YM4rqwkuvgkyAhEYEA'
},
body: JSON.stringify({
username: username.toString(),
password: password.toString()
})
}).then(function(response) {
var json = response.json()
json.then((data) => {
token = data.token

if (typeof token === 'undefined') {
Alert.alert('Não foi possível fazer login')
}
else {
Alert.alert('Login feito com sucesso')
}
})
})
}





I would really appreciate if anyone could help me with that. Everything that I tried did not work.










share|improve this question




















  • 1





    What's going on here? => auth((this.state.username, this.state.password)). You're using double parentheses for some reason. Isn't that giving you an error? Try removing one set and see if that makes a difference.

    – Andy
    Nov 24 '18 at 17:39













  • What happens when you throw a console.log('password:', password) right before your fetch call? Make sure you're actually passing the data to the function. The error indicates you might not be passing the data

    – mccambridge
    Nov 24 '18 at 18:13


















1















So, basically, I have two JavaScript files, in one of them there's a function that authenticates to an API and the other one is the login screen running in the emulator. When I try to authenticate, I get the error:



undefined is not an object (evaluating 'password.toString')


This is the login screen file:






import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import styles from './login-styles';
import {auth} from '../../fetches/auth';

class LoginBox extends Component {
constructor(props) {
super(props)

this.state = {
username: '',
password: ''
}
}

render = () => {
return(
<View style={styles.box}>
<View style={styles.header}>
<Text style={{fontSize: 28}}>Bem-vindo ao PostBag v 0.0.2</Text>
</View>

<View styles={styles.app}>
<TextInput style={styles.square}
keyboardType="numeric"
placeholder='Insira sua matrúcla'
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
/>
<TextInput style={styles.square}
secureTextEntry
placeholder='Insira sua senha'
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
/>

<TouchableOpacity
style={styles.button}
onPress={() => auth((this.state.username, this.state.password))}
>
<Text style={styles.buttonTxt}>POST</Text>
</TouchableOpacity>
</View>
</View>
)
}
}

export default LoginBox;





This is the authentication function:






import {Alert} from 'react-native';

export function auth(username, password) {
fetch('https://suap.ifrn.edu.br:443/api/v2/autenticacao/token/',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-csrftoken': 'NDML6yy6HgTUIoypfWMZHMKZ32lgJf5PsNolVnLgewanw5YM4rqwkuvgkyAhEYEA'
},
body: JSON.stringify({
username: username.toString(),
password: password.toString()
})
}).then(function(response) {
var json = response.json()
json.then((data) => {
token = data.token

if (typeof token === 'undefined') {
Alert.alert('Não foi possível fazer login')
}
else {
Alert.alert('Login feito com sucesso')
}
})
})
}





I would really appreciate if anyone could help me with that. Everything that I tried did not work.










share|improve this question




















  • 1





    What's going on here? => auth((this.state.username, this.state.password)). You're using double parentheses for some reason. Isn't that giving you an error? Try removing one set and see if that makes a difference.

    – Andy
    Nov 24 '18 at 17:39













  • What happens when you throw a console.log('password:', password) right before your fetch call? Make sure you're actually passing the data to the function. The error indicates you might not be passing the data

    – mccambridge
    Nov 24 '18 at 18:13














1












1








1








So, basically, I have two JavaScript files, in one of them there's a function that authenticates to an API and the other one is the login screen running in the emulator. When I try to authenticate, I get the error:



undefined is not an object (evaluating 'password.toString')


This is the login screen file:






import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import styles from './login-styles';
import {auth} from '../../fetches/auth';

class LoginBox extends Component {
constructor(props) {
super(props)

this.state = {
username: '',
password: ''
}
}

render = () => {
return(
<View style={styles.box}>
<View style={styles.header}>
<Text style={{fontSize: 28}}>Bem-vindo ao PostBag v 0.0.2</Text>
</View>

<View styles={styles.app}>
<TextInput style={styles.square}
keyboardType="numeric"
placeholder='Insira sua matrúcla'
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
/>
<TextInput style={styles.square}
secureTextEntry
placeholder='Insira sua senha'
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
/>

<TouchableOpacity
style={styles.button}
onPress={() => auth((this.state.username, this.state.password))}
>
<Text style={styles.buttonTxt}>POST</Text>
</TouchableOpacity>
</View>
</View>
)
}
}

export default LoginBox;





This is the authentication function:






import {Alert} from 'react-native';

export function auth(username, password) {
fetch('https://suap.ifrn.edu.br:443/api/v2/autenticacao/token/',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-csrftoken': 'NDML6yy6HgTUIoypfWMZHMKZ32lgJf5PsNolVnLgewanw5YM4rqwkuvgkyAhEYEA'
},
body: JSON.stringify({
username: username.toString(),
password: password.toString()
})
}).then(function(response) {
var json = response.json()
json.then((data) => {
token = data.token

if (typeof token === 'undefined') {
Alert.alert('Não foi possível fazer login')
}
else {
Alert.alert('Login feito com sucesso')
}
})
})
}





I would really appreciate if anyone could help me with that. Everything that I tried did not work.










share|improve this question
















So, basically, I have two JavaScript files, in one of them there's a function that authenticates to an API and the other one is the login screen running in the emulator. When I try to authenticate, I get the error:



undefined is not an object (evaluating 'password.toString')


This is the login screen file:






import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import styles from './login-styles';
import {auth} from '../../fetches/auth';

class LoginBox extends Component {
constructor(props) {
super(props)

this.state = {
username: '',
password: ''
}
}

render = () => {
return(
<View style={styles.box}>
<View style={styles.header}>
<Text style={{fontSize: 28}}>Bem-vindo ao PostBag v 0.0.2</Text>
</View>

<View styles={styles.app}>
<TextInput style={styles.square}
keyboardType="numeric"
placeholder='Insira sua matrúcla'
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
/>
<TextInput style={styles.square}
secureTextEntry
placeholder='Insira sua senha'
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
/>

<TouchableOpacity
style={styles.button}
onPress={() => auth((this.state.username, this.state.password))}
>
<Text style={styles.buttonTxt}>POST</Text>
</TouchableOpacity>
</View>
</View>
)
}
}

export default LoginBox;





This is the authentication function:






import {Alert} from 'react-native';

export function auth(username, password) {
fetch('https://suap.ifrn.edu.br:443/api/v2/autenticacao/token/',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-csrftoken': 'NDML6yy6HgTUIoypfWMZHMKZ32lgJf5PsNolVnLgewanw5YM4rqwkuvgkyAhEYEA'
},
body: JSON.stringify({
username: username.toString(),
password: password.toString()
})
}).then(function(response) {
var json = response.json()
json.then((data) => {
token = data.token

if (typeof token === 'undefined') {
Alert.alert('Não foi possível fazer login')
}
else {
Alert.alert('Login feito com sucesso')
}
})
})
}





I would really appreciate if anyone could help me with that. Everything that I tried did not work.






import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import styles from './login-styles';
import {auth} from '../../fetches/auth';

class LoginBox extends Component {
constructor(props) {
super(props)

this.state = {
username: '',
password: ''
}
}

render = () => {
return(
<View style={styles.box}>
<View style={styles.header}>
<Text style={{fontSize: 28}}>Bem-vindo ao PostBag v 0.0.2</Text>
</View>

<View styles={styles.app}>
<TextInput style={styles.square}
keyboardType="numeric"
placeholder='Insira sua matrúcla'
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
/>
<TextInput style={styles.square}
secureTextEntry
placeholder='Insira sua senha'
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
/>

<TouchableOpacity
style={styles.button}
onPress={() => auth((this.state.username, this.state.password))}
>
<Text style={styles.buttonTxt}>POST</Text>
</TouchableOpacity>
</View>
</View>
)
}
}

export default LoginBox;





import React, {Component} from 'react';
import {View, Text, TextInput, TouchableOpacity} from 'react-native';
import styles from './login-styles';
import {auth} from '../../fetches/auth';

class LoginBox extends Component {
constructor(props) {
super(props)

this.state = {
username: '',
password: ''
}
}

render = () => {
return(
<View style={styles.box}>
<View style={styles.header}>
<Text style={{fontSize: 28}}>Bem-vindo ao PostBag v 0.0.2</Text>
</View>

<View styles={styles.app}>
<TextInput style={styles.square}
keyboardType="numeric"
placeholder='Insira sua matrúcla'
onChangeText={(text) => this.setState({username: text})}
value={this.state.username}
/>
<TextInput style={styles.square}
secureTextEntry
placeholder='Insira sua senha'
onChangeText={(text) => this.setState({password: text})}
value={this.state.password}
/>

<TouchableOpacity
style={styles.button}
onPress={() => auth((this.state.username, this.state.password))}
>
<Text style={styles.buttonTxt}>POST</Text>
</TouchableOpacity>
</View>
</View>
)
}
}

export default LoginBox;





import {Alert} from 'react-native';

export function auth(username, password) {
fetch('https://suap.ifrn.edu.br:443/api/v2/autenticacao/token/',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-csrftoken': 'NDML6yy6HgTUIoypfWMZHMKZ32lgJf5PsNolVnLgewanw5YM4rqwkuvgkyAhEYEA'
},
body: JSON.stringify({
username: username.toString(),
password: password.toString()
})
}).then(function(response) {
var json = response.json()
json.then((data) => {
token = data.token

if (typeof token === 'undefined') {
Alert.alert('Não foi possível fazer login')
}
else {
Alert.alert('Login feito com sucesso')
}
})
})
}





import {Alert} from 'react-native';

export function auth(username, password) {
fetch('https://suap.ifrn.edu.br:443/api/v2/autenticacao/token/',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'x-csrftoken': 'NDML6yy6HgTUIoypfWMZHMKZ32lgJf5PsNolVnLgewanw5YM4rqwkuvgkyAhEYEA'
},
body: JSON.stringify({
username: username.toString(),
password: password.toString()
})
}).then(function(response) {
var json = response.json()
json.then((data) => {
token = data.token

if (typeof token === 'undefined') {
Alert.alert('Não foi possível fazer login')
}
else {
Alert.alert('Login feito com sucesso')
}
})
})
}






javascript reactjs react-native






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 24 '18 at 18:08









Heretic Monkey

6,58863673




6,58863673










asked Nov 24 '18 at 17:34









B. VilelaB. Vilela

82




82








  • 1





    What's going on here? => auth((this.state.username, this.state.password)). You're using double parentheses for some reason. Isn't that giving you an error? Try removing one set and see if that makes a difference.

    – Andy
    Nov 24 '18 at 17:39













  • What happens when you throw a console.log('password:', password) right before your fetch call? Make sure you're actually passing the data to the function. The error indicates you might not be passing the data

    – mccambridge
    Nov 24 '18 at 18:13














  • 1





    What's going on here? => auth((this.state.username, this.state.password)). You're using double parentheses for some reason. Isn't that giving you an error? Try removing one set and see if that makes a difference.

    – Andy
    Nov 24 '18 at 17:39













  • What happens when you throw a console.log('password:', password) right before your fetch call? Make sure you're actually passing the data to the function. The error indicates you might not be passing the data

    – mccambridge
    Nov 24 '18 at 18:13








1




1





What's going on here? => auth((this.state.username, this.state.password)). You're using double parentheses for some reason. Isn't that giving you an error? Try removing one set and see if that makes a difference.

– Andy
Nov 24 '18 at 17:39







What's going on here? => auth((this.state.username, this.state.password)). You're using double parentheses for some reason. Isn't that giving you an error? Try removing one set and see if that makes a difference.

– Andy
Nov 24 '18 at 17:39















What happens when you throw a console.log('password:', password) right before your fetch call? Make sure you're actually passing the data to the function. The error indicates you might not be passing the data

– mccambridge
Nov 24 '18 at 18:13





What happens when you throw a console.log('password:', password) right before your fetch call? Make sure you're actually passing the data to the function. The error indicates you might not be passing the data

– mccambridge
Nov 24 '18 at 18:13












3 Answers
3






active

oldest

votes


















0














I think, because of that password or username is null or undefined at that moment. You can check if they are defined and they are strings as below,



body: JSON.stringify({
username: typeof username === 'string' ? username.toString() : '',
password: typeof password === 'string' ? password.toString() : ''
})


and your view should be changed as follow,



onPress={() => auth(this.state.username, this.state.password)}






share|improve this answer

































    0














    Delete extra brackets from onPress.



    auth(this.state.username, this.state.password)





    share|improve this answer































      0














      Change this



      <TouchableOpacity
      style={styles.button}
      onPress={() => auth((this.state.username, this.state.password))}
      >


      to



      <TouchableOpacity
      style={styles.button}
      onPress={() => auth(this.state.username, this.state.password)}
      >


      Also, whenever you're accessing objects with dot operator (.toString()), it's safe to check if the object is present in the first place.



      So it's a good idea to convert this



      body: JSON.stringify({
      username: username.toString(),
      password: password.toString()
      })


      to



      body: JSON.stringify({
      username: username && username.toString(),
      password: password && password.toString()
      })





      share|improve this answer
























        Your Answer






        StackExchange.ifUsing("editor", function () {
        StackExchange.using("externalEditor", function () {
        StackExchange.using("snippets", function () {
        StackExchange.snippets.init();
        });
        });
        }, "code-snippets");

        StackExchange.ready(function() {
        var channelOptions = {
        tags: "".split(" "),
        id: "1"
        };
        initTagRenderer("".split(" "), "".split(" "), channelOptions);

        StackExchange.using("externalEditor", function() {
        // Have to fire editor after snippets, if snippets enabled
        if (StackExchange.settings.snippets.snippetsEnabled) {
        StackExchange.using("snippets", function() {
        createEditor();
        });
        }
        else {
        createEditor();
        }
        });

        function createEditor() {
        StackExchange.prepareEditor({
        heartbeatType: 'answer',
        autoActivateHeartbeat: false,
        convertImagesToLinks: true,
        noModals: true,
        showLowRepImageUploadWarning: true,
        reputationToPostImages: 10,
        bindNavPrevention: true,
        postfix: "",
        imageUploader: {
        brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
        contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
        allowUrls: true
        },
        onDemand: true,
        discardSelector: ".discard-answer"
        ,immediatelyShowMarkdownHelp:true
        });


        }
        });














        draft saved

        draft discarded


















        StackExchange.ready(
        function () {
        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53460733%2freact-native-undefined-is-not-an-objectevaluating-password-tostring%23new-answer', 'question_page');
        }
        );

        Post as a guest















        Required, but never shown

























        3 Answers
        3






        active

        oldest

        votes








        3 Answers
        3






        active

        oldest

        votes









        active

        oldest

        votes






        active

        oldest

        votes









        0














        I think, because of that password or username is null or undefined at that moment. You can check if they are defined and they are strings as below,



        body: JSON.stringify({
        username: typeof username === 'string' ? username.toString() : '',
        password: typeof password === 'string' ? password.toString() : ''
        })


        and your view should be changed as follow,



        onPress={() => auth(this.state.username, this.state.password)}






        share|improve this answer






























          0














          I think, because of that password or username is null or undefined at that moment. You can check if they are defined and they are strings as below,



          body: JSON.stringify({
          username: typeof username === 'string' ? username.toString() : '',
          password: typeof password === 'string' ? password.toString() : ''
          })


          and your view should be changed as follow,



          onPress={() => auth(this.state.username, this.state.password)}






          share|improve this answer




























            0












            0








            0







            I think, because of that password or username is null or undefined at that moment. You can check if they are defined and they are strings as below,



            body: JSON.stringify({
            username: typeof username === 'string' ? username.toString() : '',
            password: typeof password === 'string' ? password.toString() : ''
            })


            and your view should be changed as follow,



            onPress={() => auth(this.state.username, this.state.password)}






            share|improve this answer















            I think, because of that password or username is null or undefined at that moment. You can check if they are defined and they are strings as below,



            body: JSON.stringify({
            username: typeof username === 'string' ? username.toString() : '',
            password: typeof password === 'string' ? password.toString() : ''
            })


            and your view should be changed as follow,



            onPress={() => auth(this.state.username, this.state.password)}







            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Nov 24 '18 at 18:29

























            answered Nov 24 '18 at 18:18









            dinindudinindu

            2,13211224




            2,13211224

























                0














                Delete extra brackets from onPress.



                auth(this.state.username, this.state.password)





                share|improve this answer




























                  0














                  Delete extra brackets from onPress.



                  auth(this.state.username, this.state.password)





                  share|improve this answer


























                    0












                    0








                    0







                    Delete extra brackets from onPress.



                    auth(this.state.username, this.state.password)





                    share|improve this answer













                    Delete extra brackets from onPress.



                    auth(this.state.username, this.state.password)






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 24 '18 at 18:18









                    akcobanakcoban

                    531111




                    531111























                        0














                        Change this



                        <TouchableOpacity
                        style={styles.button}
                        onPress={() => auth((this.state.username, this.state.password))}
                        >


                        to



                        <TouchableOpacity
                        style={styles.button}
                        onPress={() => auth(this.state.username, this.state.password)}
                        >


                        Also, whenever you're accessing objects with dot operator (.toString()), it's safe to check if the object is present in the first place.



                        So it's a good idea to convert this



                        body: JSON.stringify({
                        username: username.toString(),
                        password: password.toString()
                        })


                        to



                        body: JSON.stringify({
                        username: username && username.toString(),
                        password: password && password.toString()
                        })





                        share|improve this answer




























                          0














                          Change this



                          <TouchableOpacity
                          style={styles.button}
                          onPress={() => auth((this.state.username, this.state.password))}
                          >


                          to



                          <TouchableOpacity
                          style={styles.button}
                          onPress={() => auth(this.state.username, this.state.password)}
                          >


                          Also, whenever you're accessing objects with dot operator (.toString()), it's safe to check if the object is present in the first place.



                          So it's a good idea to convert this



                          body: JSON.stringify({
                          username: username.toString(),
                          password: password.toString()
                          })


                          to



                          body: JSON.stringify({
                          username: username && username.toString(),
                          password: password && password.toString()
                          })





                          share|improve this answer


























                            0












                            0








                            0







                            Change this



                            <TouchableOpacity
                            style={styles.button}
                            onPress={() => auth((this.state.username, this.state.password))}
                            >


                            to



                            <TouchableOpacity
                            style={styles.button}
                            onPress={() => auth(this.state.username, this.state.password)}
                            >


                            Also, whenever you're accessing objects with dot operator (.toString()), it's safe to check if the object is present in the first place.



                            So it's a good idea to convert this



                            body: JSON.stringify({
                            username: username.toString(),
                            password: password.toString()
                            })


                            to



                            body: JSON.stringify({
                            username: username && username.toString(),
                            password: password && password.toString()
                            })





                            share|improve this answer













                            Change this



                            <TouchableOpacity
                            style={styles.button}
                            onPress={() => auth((this.state.username, this.state.password))}
                            >


                            to



                            <TouchableOpacity
                            style={styles.button}
                            onPress={() => auth(this.state.username, this.state.password)}
                            >


                            Also, whenever you're accessing objects with dot operator (.toString()), it's safe to check if the object is present in the first place.



                            So it's a good idea to convert this



                            body: JSON.stringify({
                            username: username.toString(),
                            password: password.toString()
                            })


                            to



                            body: JSON.stringify({
                            username: username && username.toString(),
                            password: password && password.toString()
                            })






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 24 '18 at 18:40









                            Dinesh PandiyanDinesh Pandiyan

                            2,79811028




                            2,79811028






























                                draft saved

                                draft discarded




















































                                Thanks for contributing an answer to Stack Overflow!


                                • Please be sure to answer the question. Provide details and share your research!

                                But avoid



                                • Asking for help, clarification, or responding to other answers.

                                • Making statements based on opinion; back them up with references or personal experience.


                                To learn more, see our tips on writing great answers.




                                draft saved


                                draft discarded














                                StackExchange.ready(
                                function () {
                                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53460733%2freact-native-undefined-is-not-an-objectevaluating-password-tostring%23new-answer', 'question_page');
                                }
                                );

                                Post as a guest















                                Required, but never shown





















































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown

































                                Required, but never shown














                                Required, but never shown












                                Required, but never shown







                                Required, but never shown







                                這個網誌中的熱門文章

                                Tangent Lines Diagram Along Smooth Curve

                                Yusuf al-Mu'taman ibn Hud

                                Zucchini