"Login.setUser is not a function" error in react-native (expo)

Viewed 125

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>

    )
  }
}
1 Answers

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.

Related