-1

Confusing for me question is: as a convention i give a name for arrow function components in react by starting from lowercase letter:

const todo = () => {
    return (
        <div>

        </div>
    )
}

export default todo

Then, i'm trying to use 'useState' Hook, and have the error:

Failed to compile.

./src/components/Todo.js
  Line 4:  React Hook "useState" is called in function "todo" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

For success compile i need to rename component as 'Todo'

In App.js i'm using it like:

import Todo from './components/Todo'

And this is ok, but when i'm using hook i'm getting error. What is wrong with naming?

UPD

Full code of component. I want to rename it const todo, not const Todo. Why i'm getting error?

import React, {useState} from 'react'

const Todo = props => {
    const [todoName, setTodoName] = useState('')
    const [todoList, setTodoList] = useState([])

    // const [todoState, setTodoState] = useState({userInput: '', todoList: []})

    const inputChangeHandler = (event) => {
        setTodoName(event.target.value)
        // setTodoState({
        //    userInput: event.target.value,
        //    todoList: todoState.todoList 
        // })
    }

    const todoAddHandler = () => {
        setTodoList(todoList.concat(todoName))
        // setTodoState({userInput: todoState.userInput, todoList: todoState.todoList.contact(todoState.userInput)})
    }

    return (
      <div>
        <input type='text' placeholder='Todo' onChange={inputChangeHandler} value={todoName} />
        <button onClick={todoAddHandler}>Add todo</button>
        <ul>
          {todoList.map(todo => (
            <li key={todo}>{todo}</li>
          ))}
        </ul>
      </div>
    )
}

export default Todo
WhoIsDT
  • 695
  • 2
  • 9
  • 27
  • Can you post the code where you try to use `useState`? – ApplePearPerson Jun 06 '19 at 10:25
  • 1
    Component always start with Capital name case. Normal naming cases treat as javascript function – Shubham Verma Jun 06 '19 at 10:26
  • @ShubhamVerma did u mean creating of component? i'm not talking about rendering like < Component />. As component is_ arrow function it must be named from lowercase in this case. – WhoIsDT Jun 06 '19 at 10:32
  • @WhoIsDT Whenever you have a function that you're defining as a class(in this case its component) it's best practice to use a capital letter as that is the common naming convention between languages and it's much more clear than what a lowercase letter is, that said it plays no part in how the code actually functions so you can call it anything you like. And in javascript, it is treated as es5 class if you start with capital naming case. more info here : https://stackoverflow.com/questions/1564398/javascript-method-naming-lowercase-vs-uppercase/1564489 – Shubham Verma Jun 06 '19 at 10:38
  • Ok, thank you! I'll know :) – WhoIsDT Jun 06 '19 at 10:52

1 Answers1

4

Naming does not matter when you export. It matters when you render. Eg:

import todo from './components/todo';
<todo /> // error

instead, the same:

import Todo from './components/todo';
<Todo /> // ok

React JSX component has to be Capitalized.

Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
  • But as i said, I CAN name const todo = () => {}. instead of const Todo = () = {} and i can correctly import it AS import Todo!!! so there is no problems of compiling! Error only while i'm trying to use HOOK! – WhoIsDT Jun 06 '19 at 10:24
  • 1
    Yes, hooks require capitalized name of the function too, to distinguish it from a normal function – Mosè Raguzzini Jun 06 '19 at 10:30