react usecontext inside class components

1import React from "react";
2import ReactDOM from "react-dom";
3
4// Create a Context
5const NumberContext = React.createContext();
6// It returns an object with 2 values:
7// { Provider, Consumer }
8
9function App() {
10  // Use the Provider to make a value available to all
11  // children and grandchildren
12  return (
13    <NumberContext.Provider value={42}>
14      <div>
15        <Display />
16      </div>
17    </NumberContext.Provider>
18  );
19}
20
21function Display() {
22  // Use the Consumer to grab the value from context
23  // Notice this component didn't get any props!
24  return (
25    <NumberContext.Consumer>
26      {value => <div>The answer is {value}.</div>}
27    </NumberContext.Consumer>
28  );
29}
30
31ReactDOM.render(<App />, document.querySelector("#root"));
32
33
34
35//now with useContext the same page look like this
36// import useContext (or we could write React.useContext)
37import React, { useContext } from 'react';
38
39// ...
40
41function Display() {
42  const value = useContext(NumberContext);
43  return <div>The answer is {value}.</div>;
44}

1The problem is what the error says. React hooks aren't available in class 
2components. Due to differences between class components and function components,
3hooks cannot be used with the former.
4
5const SignUpScreen = ({navigation}) => {
6  const { signIn } = React.useContext(AuthContext);
7
8  return (<SignUpClass appContext={signIn}> </SignUpClass>);
9}
10
11export default SignUpScreen;
12
13class SignUpClass extends React.Component<any> {
14  constructor(props?) {
15    super(props);
16  }
17
18  render() {
19    return (
20      <div> CounterButton: 
21      	<button onClick={() => {this.props.appContext.setCount(this.props.appContext.count + 5)}}>
22        	App Counter + 5
23        </button>
24      </div>
25    )
26  }
27}