Using reactj with Redux and hook

Admin 1
Viewed 262

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???

redux react-hooks reactjs
5 Answers

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.

user_88769110

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.

user_52280650

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
}
user_77709730

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 = () => { 
...
}
user_83695650

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

user_125589560
Related