React Native: Props Warning, invalid prop value

Question

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.

2. The Warning I 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

Answer 1

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

Answer 2

If you were to log "event" in your placeNameChangedHandler function you would see that it is an object not just the string value you're looking for. So you are setting your state to the full event object and then trying to render it on the screen.

You need to destructure the object to get the string value you're looking for.

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