Search code examples
react-nativetextinput

React Native cannot write into TextInput


I am creating an app where the user can enter some text. I want the text the user entered into the Terminal as a log.

My problem is that when I launch the app I cannot write anything into the text field.

enter image description here

App.js:

    import { useState } from 'react';
    import { Button, StyleSheet, Text, View, TextInput } from 'react-native';
    
    export default function App() {
    
      const [enteredKeyword, setEnteredKeyword] = useState('') /* Bind TextInput to the variables */
    
      
      const keywordInputHandler = (enteredText) => {
        setEnteredKeyword(enteredText)
      }
      const addKeywordHandler = () => {
        console.log(enteredKeyword)
      }
    
      return (
        <View style={styles.container}>
    
          { /* Header */ }
          <View style={styles.header}>
            <TextInput placeholder="Enter text" style={styles.textInput} onChangedText={keywordInputHandler} value={enteredKeyword} />
            <Button title="Add" onPress={addKeywordHandler} />
          </View>
    
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    
    
      header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
      },
      textInput: {
        width: '80%',
        borderColor: 'black',
        borderWidth: 1,
        padding: 10
      }
    });

Solution

  • Please change onChangedText to onChangeText.

    Also check out the guide of TextInput: https://reactnative.dev/docs/textinput