Search code examples
react-nativewarningstextinput

React Native: Props Warning, invalid prop value


I'm New to react native, I'm Building a sample app and when entering data to TextInput field I'm Getting the warning. I tried running it on Android emulator and on my Pocophone f1 device and got the same results. I'm using VS Code as my IDE. I'm Developing on Ubuntu 18.04
Can anyone help? These are screenshots of the app

  1. the data I'm entering. the data I'm entering

  2. The Warning IThe Warning i get get

This is my Code

        /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow
     */

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View, TextInput, Button} from 'react-native';

    //type Props = {};
    export default class App extends Component {

      state = {
        placeName: "",
        places: []
      }


      placeNameChangedHandler = (event) => {
        this.setState({
          placeName: event
        });
      }

      placeNameSubmitHandler = () => {
        if (this.state.placeName === ""){
          return;
        }
        this.setState(prevState => {
          return {
            places: prevState.places.concat(prevState.placeName)
          };
        });
      };

      render() {
        const placesOutput = this.state.places.map(place => (
          <Text>{place}</Text>
        ));
        return (
          <View style={styles.container}>

            <View style={styles.inputContainer}>
            <TextInput
            style={{width: 200, borderColor: "black", borderWidth: 1}}
            placeholder="Place Name"
            value={this.state.placeName} 
            onChangeText={this.placeNameChangedHandler} 
            style={styles.PlaceInput} />
            <Button title="Add"  style={styles.placeButton} onPress={this.placeNameChangedHandler} />
            </View>
            <View>
                {placesOutput}
            </View>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        padding: 26,
        justifyContent: 'space-between', 
        alignItems: 'center',
        backgroundColor: '#F5FCFF', 
      },
      inputContainer:{
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: 'center'
      },
      PlaceInput:{
    width: "70%"
      },
      placeButton:{
    width: "30%"
      }

    });

I changed the code as suggested in the answer below and got an error as shown in the screen below

Error afterchanging code


Solution

  • I found the issue: on the **onPress event handler I called the wrong function, sorry for the time I wested **