React hook problem

Question

Hejka, czy może mi ktoś wyjaśnić czemu mi nie działa ten hook do przypisania name w sendForm.js. Dostaje taki komunikat

React Hook "useState" is called in function "sendForm" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

SendForm.js

import React, { useState } from 'react';
import '../Style/sendForm.css'

const sendForm = () => {
    const [name, setName] = useState('Mary');
    return (

        <form className="form">
            <input type='text' />
        </form>
    );
}

export default sendForm;

App.js

import React, { Component, useState } from 'react';
import './Style/App.css'
import Form from './Components/sendForm'
import sendForm from './Components/sendForm';


const App = () => {

  return (
    <div className="App">
      <h1 className='header'>Rick and Morty<br />Information</h1>
      <section className="section">
        <div className="section__left">
          <sendForm />
        </div>
        <div className="section__right">

        </div>
      </section>
    </div >
  );
}

export default App;

 

Comments

na ten moment nie widzę abyś wgl tego hooka używał

---

W przypadku kiedy chce przypisać do inputa wartosc tego hooka ten sam komunikat mi sie pojawia

---

A to nie jest błąd lintera odnoszący się do dwóch zasad używania hook-ów?

Don’t call Hooks from regular JavaScript functions. Instead, you can:

• ✅ Call Hooks from React function components.
• ✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).

Funkcja, która korzysta z hook-a powinna być prefixowana słowem "use", albo jej nazwa powinna być z dużej litery (jak nazwa klasy)? Czyli useSendForm lub SendForm?

---

Dzięki wielki :D wystarczyło zmienić  nazwe

---

Na "use*", czy z dużej litery?

---

Na dużą litere. Ponieważ w przypadku napisania use z małej nie renderowało komponentu