React native редактировать список дел
Всем привет, кто нибудь знает как можно оформить функцию туду листа чтобы редактировать айтемы из списка ? Я пробовал делать как в документации реакта нэйтив:
export default function UselessTextInput() {
const [value, onChangeText] = React.useState('Useless Placeholder');
return (
<TextInput
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
onChangeText={text => onChangeText(text)}
value={value}
/>
);
}
но в функции map этот способ не работает. Вот мой код :
`const App = () => {
const[todos,setTodos] = useState({
tasks: [],
task: '',
key: ''
})
const addItem = () => {
if(todos.task != '' && todos.task != null){
setTodos({
tasks: todos.tasks.concat(todos.task),
task: ''
})
console.log(todos.tasks)
}
else {
Alert.alert('OOPS!', 'You need to fill in input' , [{
text: 'Understood'
}])
}
}
const removeItem = arg => {
const list = todos.tasks;
list.splice(arg,1)
setTodos({tasks: list})
}
return (
<ScrollView keyboardShouldPersistTaps='handled'>
<View style={styles.container}>
<View style = {styles.header}>
<Text style = {styles.title}>Todos</Text>
</View>
<View style={styles.content}>
<TextInput
style = {styles.input}
placeholder = "Type new item"
value = {todos.task}
onChangeText = {e => setTodos({...todos, task: e, key: Date.now()})}
/>
<ButtonSubmit text = 'Submit' onPress = {addItem}/>
{
todos.tasks.map((item, index) => {
return(
<TouchableOpacity>
<View style = {styles.Wrapper} key = {todos.key}>
<View style = {styles.taskWrapper}>
<TextInput style = {styles.task} id = {todos.key} value = {item} onChangeText={text => setTodos(text)} />
</View>
<ButtonRemove onPress = {() => removeItem(index)} />
</View>
</TouchableOpacity>
)
})
}
</View>
</View>
</ScrollView>
);
}
`