React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function

Question

I\'m trying to use react hooks for a simple problem

const [personState,setPersonState] = useState({ DefinedObject });

with following depend

Answer 1

Try to capitalize 'app' like

const App = props => {...}

export default App;

In React, components need to be capitalized, and custom hooks need to start with use.

Answer 2

Use first letter capital in the function name.

function App(){}

Answer 3

Just try to capitalize your App name

const App = props => {...}

export default App;

Answer 4

The solution is simple, correct "app" and write "App" with the first character in uppercase.

Answer 5

Make function name capital. This works for me.

export default function App() { }

Answer 6

Do not use arrow function to create functional components.

Do as one of the examples below:

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

Or

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

If you have problems with "ref" (probably in loops), the solution is to use forwardRef():

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});