Me and my team are developing a login & sign up system for a react-native app via expo. However, when typing the username, the application crashes and gives the following error:
TypeError: Login.setUser is not a function
onChangeText
{project folder}/telas/login.js:24
21 | <TextInput
22 | style={styles.input}
23 | placeholder="Nome de usuário"
> 24 | onChangeText={text => Login.setUser(text)}
| ^ 25 | />
26 |
27 | <TextInput
It's important to note that this code is exporting a class, and most tutorials (afaik) export a function. Is there any way to solve this without changing the export method?
login.js
import React, { Component, useState } from 'react'
import { Alert, Text, StyleSheet, View, TextInput, TouchableOpacity, Image } from 'react-native'
export function Login() {
const [user, setUser] = useState('');
}
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.titulo}>
BOM DENTE
</Text>
<Image
style={styles.logo}
source={require('../assets/icon.png')}
/>
<TextInput
style={styles.input}
placeholder="Nome de usuário"
onChangeText={text => Login.setUser(text)}
/>
<TextInput
style={styles.input}
secureTextEntry={true}
placeholder="Senha"
/>
<TouchableOpacity
style={styles.botao}
>
<Text style={styles.botaoText}>
LOGIN
</Text>
</TouchableOpacity>
</View>
)
}
}
In react you can't access a component's setState this way: onChangeText={text => Login.setUser(text)}. You can send data to other components via props.