Use hook in export function - React Native-CodePudding

I want to write 1 common function that I will use in different functional components.

This generic function uses hooks and I get the error: Error: Invalid hook call. Hooks can only be called inside the body of a functional component.

Example of my code:

App.js

import React from 'react';
import {
    Text,
    TouchableOpacity,
} from 'react-native';
import { Change } from 'static/Change';

export default function App() {
    return (
        <TouchableOpacity
            onPress={() => { 
                Change();
            }}
        >
            <Text>Click Me!</Text>
        </TouchableOpacity>
    );
}

Change.js

import React from 'react';

export const Change = () => {
    const [State, setState] = React.useState(0);

    // Other hook work.
    // The function returns nothing
};

What is my mistake and how can I fix it?

CodePudding user response：

Hooks has some rules to follow - https://reactjs.org/docs/hooks-rules.html

Refactor code as below


import React from "react";
import { Text, TouchableOpacity } from "react-native";

function useChange() {
  const [state, setState] = React.useState(0);
  function change(value) {
    setState(value);
  }

  return { change, state };
}

export default function App() {
  const { change, state } = useChange();
  return (
    <TouchableOpacity
      onPress={() => {
        // Update state value on press
        change(state   1);
      }}
    >
      <Text>Click Me!{state}</Text>
    </TouchableOpacity>
  );
}