Change text using hooks in react native - reactjs

Question

I have a very simple question. I am using hooks, and in the docs there is an example given to change the text using hooks. But there is place where I am not able to figure it out.
Below is my code:
import React, { useState } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
const HelloWorldApp = () => {
const [textUpdate, setText] = useState('text1');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>{textUpdate}</Text>
<Text>{todos.text}</Text>
</View>
);
}
export default HelloWorldApp;
I can see text1 on the screen, But I cant see Learn hooks on the screen. What is wrong with <Text>{todos.text}</Text> ??
EDIT
So I changed <Text>{todos.text}</Text> to <Text>{todos[0].text}</Text>.
Now I wanted to change the text on the click.
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>{textUpdate}</Text>
<Text>{todos[0].text}</Text>
<TouchableOpacity onPress={changeText} >
<Text>Click me</Text>
</TouchableOpacity>
</View>
and also added changeText in the component.
const changeText = () => {
if (textUpdate === 'text1' || todos[0].text === 'Learn') {
setText('text2');
setTodos({ text: 'done' })
} else if (textUpdate === 'text2' || todos[0].text === 'done') {
setText('text1');
setTodos({ text: 'Learn' })
}
}
It gives an error undefined is not an object (evaluating 'todos[0].text')

Answer 1

UPDATED ISSUE
You have initialized state an array of object and reset it like object only
UPDATED SOLUTION
Try using as an array of an object like
const changeText = () => {
if (textUpdate === 'text1' || todos[0].text === 'Learn') {
setText('text2');
setTodos([{ text: 'done' }]) // add like array
} else if (textUpdate === 'text2' || todos[0].text === 'done') {
setText('text1');
setTodos([{ text: 'Learn' }]) // add like array
}
}