Home > Software design >  React Native cannot write into TextInput
React Native cannot write into TextInput

Time:02-17

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

My problem is that when I lunch the app the 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
  }
});

CodePudding user response:

Please change onChangedText to onChangeText.

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

CodePudding user response:

onChangeText={(text)=> keywordInputHandler(text)}
  • Related