How do i convert a functional component which uses default formik hooks to class component

user_15262481 0
Viewed 79

I have a functional component which works well but I want to convert it to Class component for some reasons, but I notice there is no tutorial online that says how I'm to deal with default formik hooks and multiple props.

Here's the part of the code I'm finding hard to handle:

export default function BanksList({
  name,
  childToParentBC,
  bankResolve,
  ...otherProps
}) {
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [listofBanks, setListOfBanks] = useState([]);

  const { setFieldTouched, setFieldValue, errors, touched, values } =
    useFormikContext();
react-native reactjs
1 Answers

In short, you can't use any hook in a class component, they're exclusive.

However that doesn't mean you can't play tricks, ex. wrap a class component and then inside use the old function component.

  class ClassComponent {
    render() {
      return <FunctionComponent />
    }
  }

NOTE: class and function component are very different, people tends to compare them a lot. But IMHO they don't need to, because function component is only a function, therefore in order to persist anything it relies on the hooks which can't be used at all in class component.

user_2880960
Related