CODEWITHSUNDEEP
javascriptandroidreactjsreact-nativenative
le0nicolas
le0nicolas

Reputation: 83

How to get the value from a Text Input (a component) to my main app?

I have my main app with a Text, a Text Input (a component) and a button (another component):

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Alert } from 'react-native';
import { Tinput } from './components/Tinput.js';
import { Button } from './components/Button.js';

      export default function App() {
      return (
        <View style={styles.container}>
          <Text style={{fontSize:20, padding:20, textAlign:'center'}}>Ingrese un numero del pokémon a buscar!</Text>
          <Tinput/>
          <Button onPress={()=> ConsultarPokemon(/*this is where i want to insert the value from Tinput */)}> 
            Ingresar 
          </Button> 
          <StatusBar style="auto" />
        </View>
      );
    }

And this is my component Tinput, which has the text input:

import React from 'react';
import { TextInput } from 'react-native';

const Tinput = () => {
  const [numero, setNumero] = React.useState('');

  return (
    <TextInput
      style={{ width:'90%', height: 50, borderColor: 'gray', borderWidth: 1, backgroundColor: '#fffff0', textAlign:'center', borderRadius: 20, borderWidth:5, margin:20}}
      onChangeText={(value) => setNumero({numero: value})}
      value={this.state.numero}
      maxLength={20}
    />
  );
}

export { Tinput };

I want to use the value from the text input on my onPress function, I tried doing this but didn't work:

 <Button onPress={()=> ConsultarPokemon(Tinput.state.numero)}> 
        Ingresar 
 </Button>

Also, there's an error on my Tinput component: undefined is not an object (evaluating '_this.state.numero') So I'm probably using state the wrong way too

Upvotes: 0

Views: 226

Answers (1)

anehme
anehme

Reputation: 566

You will use this.state.X only if you created classes like component classes , and here is an exemple :

    class Counter extends React.Component {
      constructor(props) {
        super(props);
        this.initialCount = props.initialCount || 0;
        this.state = {
          count: this.initialCount
        }
      }
increment() {
    this.setState({ count: this.state.count + 1 })
  }
  reset() {
    this.setState({ count: this.initialCount})
  }
  render() {
    const { count } = this.state;
    return (
      <>
        <button onClick={this.increment.bind(this)}>+1</button>
        <button onClick={this.reset.bind(this)}>Reset</button>
        <p>Count: {count}</p>
      </>
    );
  }
}

I suggest to do not complicate things and just handle onPress inside Tinput

    const Tinput = () => {
      const [numero, setNumero] = React.useState('');
    
      return (
    <View>
        <TextInput
          style={{ width:'90%', height: 50, borderColor: 'gray', borderWidth: 1, backgroundColor: '#fffff0', textAlign:'center', borderRadius: 20, borderWidth:5, margin:20}}
          onChangeText={(value) => setNumero(value)}
          value={numero} // no need to use this.state.numero
          maxLength={20}
        />
 <Button onPress={()=> ConsultarPokemon(numero)}> 
        Ingresar 
  </Button> 
 </View>
      );
    }

Upvotes: 1

Related Questions