TypeError: undefined is not an object (evaluating ' _this.setState')

Question

i'm a complete beginner to React Native and i'm trying to add items to flatlist using textinput. i keep constantly getting a TypeError: undefined is not an object (evaluating'_this.setState'). i have edited the code many times and tried to research what i can do, but it still is not working properly. could someone help me and tell me what i need to change? below is my code. thank you in advance!

import React, { useState, setState } from 'react';
import { View, Text, StyleSheet, FlatList, Alert, TouchableOpacity, TextInput } from 'react-native';

export default function FlatlistComponent({ }) {

    const array = [{title: 'ONE'}, {title: 'TWO'}];
    const [arrayHolder] = React.useState([]);
    const [textInputHolder] = React.useState('');

    const componentDidMount = () => {
        setState({ arrayHolder: [...array] })
    }

    const joinData = () => {
        array.push({ title : textInputHolder });
        this.setState({ arrayHolder: [...array] });
    }

    const FlatListItemSeparator = () => {
        return (
            <View
                style={{
                height: 1,
                width: "100%",
                backgroundColor: "#607D8B",
                }} />
        );
    }

    const GetItem = (item) => {
        Alert.alert(item);
    }


    return (

      <View style={styles.MainContainer}>
        <TextInput
          placeholder="Enter Value Here"
          onChangeText={data => this.setState({ textInputHolder: data })}
          style={styles.textInputStyle}
          underlineColorAndroid='transparent'
        />

        <TouchableOpacity onPress={joinData} activeOpacity={0.7} style={styles.button} >
          <Text style={styles.buttonText}> Add Values To FlatList </Text>
        </TouchableOpacity>

        <FlatList
          data={arrayHolder}
          width='100%'
          extraData={arrayHolder}
          keyExtractor={(index) => index.toString()}
          ItemSeparatorComponent={FlatListItemSeparator}
          renderItem={({ item }) => <Text style={styles.item} onPress={GetItem.bind(this, item.title)} > {item.title} </Text>}
        />
      </View>

    );
  }

Answer 1

So I see you're trying to use functional components here. State variables can be rewritten like this

const [arrayHolder, setArrayHolder] = useState([]);
const [textInputHolder, setTextInputHolder] = useState('');

componentDidMount is used in class components and can be rewritten like this for functional components

import React, { useState, useEffect } from 'react';
useEffect(()=>{
  setArrayHolder(array)
}, [])

Function joinData can be re-written like this.

const joinData = () => {
        array.push({ title : textInputHolder });
        setArrayHolder(array)
    }

About the text not showing up. You're using this.setState in the onChangeText event. It is a functional component and this won't work in a functional component. state variables are declared and set using the useState hook in a functional component.

You should rewrite the onChangeText event like this.

<TextInput
    placeholder="Enter Value Here"
    onChangeText={data => setTextInputHolder(data)}
    style={styles.textInputStyle}
    underlineColorAndroid='transparent'
/>

I think this'll solve your problem