Using reactj with Redux and hook

Question

I have this component:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import inputAction from '../../redux/actions/inputActions';
import clienteActions from '../../redux/actions/clientesAction';

const clientes = () => { 
    const dispatch = useDispatch();
    const clientes = useSelector(state => state.clientes.clientes);
    
    //.... more code
}

ant I have an error in this line:

const dispatch = useDispatch();

this is the error

src\components\clientes\clientes.js
  Line 7:22:  React Hook "useDispatch" is called in function "clientes" 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
  Line 8:22:  React Hook "useSelector" is called in function "clientes" 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

what I wrong???

Is your function `clientes` returning some React elements? How is it rendered? — T J, Apr 02 '21 at 19:20
`clientes` is not considered a React component - [try capitalizing it](https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) — chazsolo, Apr 02 '21 at 19:21
@chazsolo It work, I changed name function and it work thanks — , Apr 02 '21 at 19:27

score 1 · Answer 1 · answered Apr 02 '21 at 19:24

All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated like a built-in element like a div or a span. This is because of the way JSX works.

Just change Function to Clientes and don't forget to export it.

score 0 · Answer 2 · answered Apr 02 '21 at 19:26

Hooks in react functional components have to be used in the main component function without conditions, loops, or callbacks.

Example of the useState hook:

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      Text
    </div>
  );
}

You have to move useDispatch hook to the main component function.

score 0 · Answer 3 · answered Apr 02 '21 at 19:27

Rename component and component name must be as Uppercase

Example:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import inputAction from '../../redux/actions/inputActions';
import clienteActions from '../../redux/actions/clientesAction';

export const Clientes = () => { 
  const dispatch = useDispatch();
  const clientes = useSelector(state => state.clientes.clientes);

    //.... more code
}

score 0 · Answer 4 · answered Apr 02 '21 at 19:27

I think this issue is self-explanatory. In your error message, they are saying ... React component names must start with an uppercase letter .... So, your component is currently recognized as a normal function yet it's a component. Thus, if you mean it to be a react component, it has to start with an uppercase letter.

const Clientes = () => { 
...
}

score 0 · Answer 5 · answered Apr 02 '21 at 19:28

0

Your code look very okay expect for one thing: Your component name is in lowercase which is causing the error. In react, components i.e functions names must start with a capital letter. You can learn more about that and why that is the case here

answered Apr 02 '21 at 19:28

Suraj Auwal

322
3
9

Using reactj with Redux and hook

5 Answers5