Trying to Dynamically create Textinput in react native - react-native

Question

I am creating a Todo App to practice what I have learned. I got to a point where I am trying to dynamically create a textinput when the user presses a button. However, I have been stuck for a while now and haven´t been able to figure it out. Here is my code. Any help is much appreciated. My main issue is the handle of the user input with the creation of the textinput and how to handle it.
import React from 'react';
import {StyleSheet, View, Button, TextInput, ScrollView} from 'react-
native';
import {Constants} from 'expo';
import FormNewTodo from '../components/FormNewTodo'
const styles = StyleSheet.create ({
appContainer: {
flex: 1,
paddingTop: Constants.statusBarHeight,
backgroundColor: 'white',
},
form: {
padding: 10,
borderColor: 'black',
borderWidth: 1,
},
})
let id = 0
export default class AddTodoForm extends React.Component {
state = {
titleText: '',
formItems: [],
}
handleAddTodo = () => {
this.setState({
formItems: [...this.state.formItems, {id: id++, text: ''},],
})
};
handleformItemsChange = text => {
// pass the formItems state to a variable
let newArray = [...this.state.formItems];
let item = [];
/*Check if it´s the beginning of a new input or to check if the
user is going to an old input to edit it*/
if (text.length === 1)
{
item = newArray.filter(item => item.text === '')}
else {
item = newArray.filter(item => item.text === text[text.length - 1])}
//pass the item to the right element in the array and the update
state
let index = item[0].id;
item[0].text = text;
newArray[index] = item;
this.setState({ formsItems: newArray });
}
handleFormTitleChange = titleText => {
this.setState({titleText: titleText})
}
handleSave = () => {
this.props.onSubmit(this.state)
let id = 0
};
static navigationOptions = ({ navigation }) => {
return {
headerTitle: 'TO DO´s',
headerRight: (
<Button
title="Add"
onPress={() => navigation.navigate('AddTodoForm')}
/>
),
};
};
render() {
return (
<View>
<View>
<TextInput style={styles.form}
value={this.state.titleText}
onChangeText={this.handleFormTitleChange}
placeholder={'Title'}/>
</View>
<ScrollView>
{this.state.formItems.map(item => <FormNewTodo
key={item.id}
onChangeText={this.handleformItemsChange}
value={item.text}
/>)}
</ScrollView>
<Button onPress={this.handleSave} title='Save'/>
<Button onPress={this.handleAddTodo} title='Add Todo'/>
</View>
)
}
}