useState error, i cannot find the solution

Question

can you please explain to me why this code is wrong

import React, { useState } from 'react';

import UsrInput from '../component/UsrInput'
import TodoItemList from '../component/TodoItemList'

const todos = () => {

  const DUMMY_TODO_ITEM = [
    {
      id: 'ti1',
      description: 'do programming'
    },
    {
      id: 'ti2',
      description: 'do dishes'
    },
    {
      id: 'ti3',
      description: 'cleaning the house'
    },
  ]

  const [todoItem, setTodoItem] = useState(DUMMY_TODO_ITEM);

  return (
    <React.Fragment>
      <UsrInput />
      <TodoItemList item={DUMMY_TODO_ITEM} />
    </React.Fragment>
  );
}

export default todos;

I'am getting this error >>

"Failed to compile.

src\main\pages\Todos.js Line 23:35: React Hook "useState" is called in function "todos" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks

Search for the keywords to learn more about each error."

Answer 1

React Components naming convention says that the first letter should be uppercase. React Hooks can only be used inside React Components. So you'll have to rename your const todos -> const Todos for react to treat it as a Component.

Answer 2

Try to capitalize 'todos' like Todos

In React, components need to be capitalized, and custom hooks need to start with use.