how do you get a input from a TextInput (in expo) and store it as a variable to be recalled in another function without using class?

Question

I am working on a very simple reminders app as an introduction to using react and javascript. (i am a complete beginner at javascript, but have experience with languages like ruby.) I want to be able to get a user keyboard input from this TextInput component (https://docs.expo.io/versions/v37.0.0/react-native/textinput/#content) without using a class. I just want to store the input as a variable and be able to call it up anywhere else in my code. The {text} variable in the second function is where i want to store the input from the first function. (apologies for bad english) i try to run it, and it says that it couldnt find variable 'text', even though thats what its being assigned to.

function NewReminderScreen({ navigation }) {
  const [value, onChangeText] = React.useState('click to add reminder.')

  return (
    <View style={styles.container}>
      <TextInput
        style={{height: 40, borderColor: 'white', borderWidth: 0, color:'#595959', fontSize:20, marginHorizontal:5}}
        onChangeText={text => onChangeText(text)}
        value = {value}
      />   
);


}

function HomeScreen({ navigation }) {

  return (
    <View style={styles.container}>
      <Text style={styles.buttontext}>{text}</Text>

      <TouchableOpacity
        onPress={() => navigation.navigate('NewReminderScreen')}
        style={styles.plusbutton}>
        <Text style={styles.buttontext}>+</Text>

      </TouchableOpacity>
    </View>
  );
}

Ajin Kabeer · Accepted Answer · 2020-04-07T18:11:35.587

0

Can you try by declaring a variable outside the function and assigning the value to it when the function inside onChange prop is fired?

  let text = '';

  function NewReminderScreen({ navigation }) {
  const [value, onChangeText] = React.useState('click to add reminder.')

  function textChangeHandler(event){
    onChangeText(event.target.value)
     text = event.target.value;
    }

  return (
    <View style={styles.container}>
      <TextInput
        style={{height: 40, borderColor: 'white', borderWidth: 0, color:'#595959', fontSize:20, marginHorizontal:5}}
        onChange={textChangeHandler}
        value = {value}
      />   
);


}

edited Apr 07 '20 at 18:11

answered Apr 07 '20 at 05:27

Ajin Kabeer

2,096
2
9
18

When i try this inside of expo, it says that e cannot be found as a variable. is there something else that is can use instead? – snalrus Apr 07 '20 at 13:45
Oh, I am sorry. It should be event instead of e. – Ajin Kabeer Apr 07 '20 at 18:11
i would like to, but sadly i do not have enough reputation. – snalrus Apr 07 '20 at 19:28

learner · Answer 2 · 2020-04-08T00:06:45.857

SCREEN 1 You can make a constructor like this

function NewReminderScreen({ navigation }) {
     constructor(props){
          super(props)
          this.state = {
          text: ''

          }
       }
  const [value, onChangeText] = React.useState('click to add reminder.')



 return (
    <View style={styles.container}>
      <TextInput
        style={{height: 40, borderColor: 'white', borderWidth: 0, color:'#595959', fontSize:20, marginHorizontal:5}}
        onChangeText={text => this.setState({text})}
        value = {value}
      />   
);


}

Put this into your button click function to navigate to your HomeScreen

   this.props.navigation.replace('HomeScreen', { 
     text: this.state.text
  })

SCREEN 2

And put this after render in your homescreen

    const text = this.props.route.params.text;

And put this anywhere you want in your contain

 <Text style={styles.buttontext}>{text}</Text>

ah, thanks. i just set the onchange equal to a value and it worked — snalrus, Apr 08 '20 at 00:44

how do you get a input from a TextInput (in expo) and store it as a variable to be recalled in another function without using class?

2 Answers2