Question 295290 in React native Question posted in
The official React Native documentation can be found here.

React native – Unable to write in TextInput (JavaScript)

For reasons unknown my text input wont let me update or even type into the text box. I swear I was able to write into it earlier but now clicking on it does nothing except producing the black border. The specific bit of code I’m using is:

        <SafeAreaView>
            <TextInput
                style={styles.input}
                placeholder="Enter cohort code"
                value={cohortInput}
                onChangeText={(text) => { cohortInput = text }}
            />
        </SafeAreaView>

meanwhile the whole code is:

import * as React from 'react';
import { Button, SafeAreaView, StyleSheet, Text, View, TextInput } from 'react-native';

function WelcomeScreen({ navigation }) {
     
    var cohortInput = '';
    var instructorInput = '';
    const [empty, setEmpty] = React.useState(false);
    const [error, setError] = React.useState(false);
    

    return (
        <View style={styles.container}>
            
            <Text style={styles.text}>
                {'Join cohort: n'}
            </Text>

            <SafeAreaView>
                <TextInput
                    style={styles.input}
                    placeholder="Enter cohort code"
                    value={cohortInput}
                    onChangeText={(text) => { cohortInput = text }}
                />
            </SafeAreaView>

            {/*
            <Text style={style.error}>
                {empty? <Text>  Please enter a code!</Text>: null }
            </Text>
            */}
            

            <Text style={styles.text}>{'n Join as Instructor:'}</Text>
            
            <SafeAreaView>
                <TextInput
                    style={styles.input}
                    placeholder="Enter facilitator code"
                    value={instructorInput}
                    onChangeText={(text) => { instructorInput = text }}
                />
            </SafeAreaView>

            
            <view style={styles.buttonContainer }>
                <Button
                    title='Join'
                    onPress={() => {
                    if (cohortInput === '')
                        setEmpty(!empty);
                }}>
                </Button>
            </view> 
            
        </View>

    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ffff',
        alignItems: 'center',
        fontSize: 20,
    },
    input: {
        height: 40,
        fontSize: 20,
        borderBlockColor: 'black',
        borderColor: 'black',
        borderRadius: 5,
    },
    text: {
        fontSize: 20,
    },
    error: {
        fontSize: 15,
        color: 'red',
    },
    buttonContainer: {
        width: 70,
        height: 30,
        color: '#0000cd',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 30,
    }
});

export default WelcomeScreen;

If you have any advice on how to resolve this I would greatly appreciate it.

Undoing until the textbox worked again but that was unfruitful

Tags:

3

Answers


  1. 0

    Updating a variable doesn’t tell React to re-render the component. Updating state does. Make your value a state value:

    const [cohortInput, setCohortInput] = React.useState('');

    And update that state value:

    onChangeText={(text) => setCohortInput(text)}

    Or simply:

    onChangeText={setCohortInput}
    Login or Signup to reply.
  2. 0

    Do not use a local variable to store the value. Control the input with state.

    const [cohortCode, setCohortCode] = React.useState('');

    <TextInput
    style={styles.input}
    placeholder="Enter cohort code"
    value={cohortCode}
    onChangeText={setCohortCode}
/>
    Login or Signup to reply.
  3. 0

    Change

    var cohortInput = '';

    to a useState():

    const [cohortInput, setCohortInput] = React.useState("");

    Then change to :

      <SafeAreaView>
        <TextInput
            style={styles.input}
            placeholder="Enter cohort code"
            value={cohortInput}
            onChangeText={setCohortInput}
        />
    </SafeAreaView>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search