How to specify the type - reactjs

Question

I am learning typescript.
I used axios and stored the api return value in useEffect and displayed it on the screen, but I get an error saying that there is no name in the interface todoList.
What is the cause?
thank you.
import React, {useEffect, useState} from 'react';
import axios from 'axios';
interface todoList {
name: string
age: number
}
function App() {
const defaultProps: todoList[] = [];
const [todoList, setTodoList]: [todoList[], (todoList: todoList[]) => void] = useState(defaultProps);
useEffect(() => {
async function getTodo() {
const response = await axios.get('http://localhost/laravel/public/api/todo');
setTodoList(response.data);
}
getTodo();
}, []);
return (
<div className="App">
{todoList.name} // Error here.
</div>
);
}
export default App;

Answer 1

Point1: This is because UI gets rendered before useEffect and hence the moment UI gets rendered it looks for todolist.name where todolist is empty and fetching name throws error. If specific name of any items is to be displayed check the array length and name is not null before mapping to UI
Point2: If all the names is to placed in UI then map the array as below
import React, {useEffect, useState} from 'react';
import axios from 'axios';
function App() {
const [todoList, setTodoList] = useState([]);
useEffect(() => {
async function getTodo() {
const response = await axios.get('http://localhost/laravel/public/api/todo');
setTodoList(response.data);
 }
getTodo();
}, []);
return (
<div>
{todoList.map((todo) =>
<p> {todo.name} </p>
)}
</div>
);
}
export default App;

Answer 2

Your todoList variable is an array of todoLists, e.g. todoList[]. You're trying to read .name of an array, which isn't defined.
You probably want to display a list of items:
return <div className="App">
{todoList.map(todo => <div key={todo.name}>
{todo.name}
</div>)}
</div>;
Your typing otherwise seems fine. One suggestion for readability that I have is simplifying your useState statement:
const [todoList, setTodoList] = useState<todoList>(defaultProps);
With how React declared the type of useState, you can use useState<T> and it'll automatically know that it's returning a [T, (value: T) => void].
Another small note: Usually interfaces/types are PascalCase, e.g. TodoList, to make sure it doesn't clash with variables and function parameters which usually have camelCase, e.g. your todoList variable.