React native todo application - react-native

Question

I need your help. Now I'm trying to create a todo application.I will try to make an application on the logic of pure react.The problem is that when I start typing input, I get an error: undefined is not an object (evaluating 'e.target.value).Please help me with this task. I will be very grateful to you
Tasks.js
import React, {useState} from "react";
import {FlatList, StyleSheet, Text, View} from "react-native";
import Task_Item from "./Task_Item";
import Form from "./Form";
export default function Tasks() {
const [tasks, setTasks] = useState([]);
const [input, setInput] = useState('');
let addTask = (myInput) => {
if (myInput) {
let newTask = {
id: Date.now(),
name: myInput
}
setTasks([...tasks, newTask])
}
}
let handleInput = (e) => {
setTasks(e.target.value)
}
return (<View style={styles.all_list}>
<FlatList data={tasks}
renderItem={({item}) => (<Task_Item keyExtractor={item => item.id} el={item}/>)}
/>
<Form addTask={addTask} inputValue={handleInput}/>
</View>)
}
Task_item.js
import React from "react";
import {StyleSheet, TouchableHighlight, Text, ScrollView} from "react-native";
export default function Task_Item({el}) {
return (<ScrollView>
<TouchableHighlight>
<Text>{el.name}</Text>
</TouchableHighlight>
</ScrollView>)
}
Form.js
import React from "react";
import {KeyboardAvoidingView, StyleSheet, Text, TextInput} from "react-native";
export default function Form({inputValue, addTask}) {
return (<KeyboardAvoidingView>
<TextInput
placeholder='Type Text...'
onChangeText={inputValue}
/>
<Text
onPress={addTask}
>+</Text>
</KeyboardAvoidingView>)
}

Answer 1

I see two things you could improve.
The onChangeText method directly passes you the text, so you should either pass the setInput to your inputValue Form prop, either change the onChangeText to the onChange.
Using onChangeText
Tasks
<Form addTask={addTask} inputValue={setInput} />
Form.js
<TextInput placeholder="..." onChangeText={inputValue} />
And therefore you can delete the handleInput method.
with onChange
Tasks
<Form addTask={addTask} inputValue={handleInput} />
Form.js
<TextInput placeholder="..." onChange={handleInput} />
The second thing is that you handleInput method is changing your tasks and not your input...
const handleInput = (e) => setInput(e.target.value)
Your addTask is not getting the input... You could change your method to this:
const addTask = () => {
if (input) setTasks([...tasks, { id: Date.now(), name: input }])
}