React Hook function useEffect

Question

Good Morning!

I'm starting react hooks, but it throws me the following error when wanting to use useEffect:

 Line 4:5:  React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function  react-hooks/rules-of-hooks

The code is the following:

profile.js

import React, { useEffect } from 'react';

function profile(props) {
    useEffect(() => {
        document.title = props.nameAtributte;
     }, [props.nameAtributte])
     

    return (
        <div style={{background:"yellow"}}>
            It's my profile component {props.nameAtributte}
        </div>
    );
}
export default profile;

App.js

import React, {useState, useEffect} from 'react';
import Profile from './components/profile';
//import logo from './logo.svg';
//import './App.css';

function App() {
  const [nombre, changeName] = useState('Juan Parez');
  function nombreInput_onChanged(e){
    changeName (e.target.value);
  }
  return (
    <div className="App">
      <h1>{nombre} eres digno, suficiente e ilimitado</h1>
      <input type="text" name="nombreInput" id="nombreInput" value={nombre} onChange={nombreInput_onChanged} />
     <Profile nameAtributte={nombre}/>
    </div>
  );
}
export default App;

package.json

  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },

What could be happening ?

I am reviewing some solutions here, but they did not work for me.

Thank you very much for the help.

Mohammad Faisal · Accepted Answer · 2020-09-26 15:04:29Z

4

Components name must start with a Capital Letter . As your profile components name starts with 'p' react is not counting it as a valid functional component. Just change the component name to Profile and it should work fine

answered Sep 26, 2020 at 15:04

Mohammad Faisal

2,3771 gold badge13 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Subrato Pattanaik · Accepted Answer · 2020-09-26 16:18:49Z

One of the rules of JSX is the name of the components must proceed with an uppercase letter.

If your JSX file contains a component that is having a lowercase letter as an initial letter then React will refer to it as a built-in component like <span> or <div> not a react component.

The Dot-notation component like <UserContext.Provider> and any component which starts with a capital letter indicates that the JSX tag is referring to a React component.

That's why you were getting the error as

React Hook "useEffect" is called in function "profile" which is neither a React function component or a custom React Hook function

So, in your case, you only need to change the function name as

function Profile(){
    //your code
}

You don't have to change the name of the file i.e profile.js, there is no such rule for that.

You can see the Official React hooks rule book from here.

Collectives™ on Stack Overflow

React Hook function useEffect

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related