CODEWITHSUNDEEP
react-nativetextinputreact-native-textinput
Marco Disco
Marco Disco

Reputation: 565

How to get values from TextInput

I'm stuck in a apparently simple function. How can I get a value (string) from a TextInput?

Here an extract of the code:

const Insert = props => {
  const [enteredName, setEnteredName] = useState();


const sendValues = (enteredName) => {

    console.log(enteredName);

  };

 <TextInput
          placeholder="Your Name"
          blurOnSubmit
          autoCorrect={false}
          maxLength={30}
          autoCapitalized="words"
          placeholderTextColor="#777"
          value={enteredName}
          onChangeText={text => setEnteredSurname(text)}

        />

        <View>
          <Button title="Submit" onPress={sendValues(enteredName)} />

I get the typing when I type but it doesn't submit anything.

Any idea about it??

Thanks in advance!

Upvotes: 2

Views: 9363

Answers (4)

Lalith Yagnavalkya
Lalith Yagnavalkya

Reputation: 159

I have the same problem, I just started learing react native, the below solution worked for getting the value from TextInput component

const [input, setInput] = useState(''); 

<TextInput 
style={ styles.textinput }
placeholder='type somthing'
onChange={ (text) => {
   console.log(text.nativeEvent.text)
   setInput(text.nativeEvent.text)
      }
   }


defaultValue={ input }
/>

Upvotes: 1

Gaurav Roy
Gaurav Roy

Reputation: 12235

Try this, you have to use it like this :

import React, { useState } from 'react';
import {Text, View,TextInput,Button} from 'react-native';
export default  Example = () =>  {

   const [enteredName, setEnteredName] = useState(''); 
  sendValues = (enteredName) =>{
    console.log(enteredName);
};
  return (
    <View>
    <Text>Hey</Text>
    <TextInput
    placeholder="Your Name"
    blurOnSubmit
    autoCorrect={false}
    maxLength={30}
    autoCapitalized="words"
    placeholderTextColor="#777"
    value={enteredName}
    onChangeText={text => setEnteredSurname(text)} />

    <View>
      <Button title="Submit" onPress={() => sendValues(enteredName)} />
    </View>
    </View>
  );
}

Upvotes: -1

TBouder
TBouder

Reputation: 2729

You should transform your onPress from an expression to a function and init your state

const Insert = props => {
  const [enteredName, setEnteredName] = useState(''); //INIT TO EMPTY


function sendValues(enteredName) {
    console.log(enteredName);
};

 <TextInput
    placeholder="Your Name"
    blurOnSubmit
    autoCorrect={false}
    maxLength={30}
    autoCapitalized="words"
    placeholderTextColor="#777"
    value={enteredName}
    onChangeText={text => setEnteredSurname(text)} />

    <View>
      <Button title="Submit" onPress={() => sendValues(enteredName)} /> //Function not expression
    </View>

Upvotes: 4

savan patel
savan patel

Reputation: 264

class AwesomeProject extends Component {

  constructor(props){
    super(props)

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

  _handlePress() {
     console.log(this.state.username);
     console.log(this.state.password);
  }

  render() {
    return (
    <ScrollView style={styles.content}>
      <View style={styles.content}>

        <Text style={styles.welcome}>
          Create Account
        </Text>

        <Text style={styles.textStyle}>
          Name
        </Text>

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Name"
          returnKeyLabel = {"next"}
          onChangeText={(text) => this.setState({username:text})}
        />

        <Text style={styles.textStyle}>
          Name
        </Text>

        <TextInput
          style={styles.textInputStyle}
          placeholder="Enter Name"
          returnKeyLabel = {"next"}
          onChangeText={(text) => this.setState({password:text})}
        />

        <Button 
          onPress={() => this._handlePress()}
          style={styles.buttonStyle}>
              Submit
        </Button>

        </View>
      </ScrollView>
    );
  }
}

Upvotes: -1

Related Questions