React Native FlatList 추가

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




const Item =({ title,user }) => {
  return (
    <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.user}>작성자 by.{user}</Text>
    </View>
  );
}

export default class FlatListView extends Component {

    state = {
        Data1:[],
        userId:'',
        userTitle:''
    }

    constructor(){
        super()
        this.addList = this.addList.bind(this)
        this.getUserId =this.getUserId.bind(this)
        this.getUserTitle =this.getUserTitle.bind(this)
    }

    getUserId(val){
       this.setState({
           userId:val
       })
    }

    getUserTitle(val) {
        this.setState({
            userTitle: val
        })
    }

    addList(){

        if(this.state.userId ===""){
            return
        }else if(this.state.userTitle ===""){
            return
        }else{
            const data = [
                ...this.state.Data1,
                {
                    title:this.state.userTitle,
                    userId:this.state.userId
                }
            ]
            this.setState({
                Data1:data,
                userId:'',
                userTitle:''
            })
        }
    }

    render()


    {
        return (
            <SafeAreaView style={styles.container}>
                <FlatList
                    data={this.state.Data1}
                    renderItem={({ item }) => <Item title={item.title} user={item.userId} />}
                    keyExtractor={item => item.id}
                />

                <View style={styles.textInputContainer}>
                    <View style={styles.textInputSt}>
                        <TextInput
                            style={{ justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}
                            placeholder='아이디'
                            onChangeText = {val=>this.getUserId(val)}
                            value={this.state.userId}
                        />
                        <TextInput
                            style={{ justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}
                            placeholder='타이틀'
                            onChangeText = {val=>this.getUserTitle(val)}
                            value={this.state.userTitle}
                        />
                    </View>
                    <Button
                        title='제출하기'
                        onPress={()=>this.addList()}
                    />
                </View>
            </SafeAreaView>
        )
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 15,
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
  user:{
    fontSize:20,
    color:'blue'
  }
});