useRef
/*
A common use case is to access a child imperatively:
*/
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}react usecontext examples
import React from "react";
import ReactDOM from "react-dom";
// Create a Context
const NumberContext = React.createContext();
// It returns an object with 2 values:
// { Provider, Consumer }
function App() {
// Use the Provider to make a value available to all
// children and grandchildren
return (
<NumberContext.Provider value={42}>
<div>
<Display />
</div>
</NumberContext.Provider>
);
}
function Display() {
// Use the Consumer to grab the value from context
// Notice this component didn't get any props!
return (
<NumberContext.Consumer>
{value => <div>The answer is {value}.</div>}
</NumberContext.Consumer>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));
//now with useContext the same page look like this
// import useContext (or we could write React.useContext)
import React, { useContext } from 'react';
// ...
function Display() {
const value = useContext(NumberContext);
return <div>The answer is {value}.</div>;
}useContext
const value = useContext(MyContext);usereducer
const [state, dispatch] = useReducer(
reducer,
{count: initialCount} );React.useContext inside class components
The problem is what the error says. React hooks aren't available in class
components. Due to differences between class components and function components,
hooks cannot be used with the former.
const SignUpScreen = ({navigation}) => {
const { signIn } = React.useContext(AuthContext);
return (<SignUpClass appContext={signIn}> </SignUpClass>);
}
export default SignUpScreen;
class SignUpClass extends React.Component<any> {
constructor(props?) {
super(props);
}
render() {
return (
<div> CounterButton:
<button onClick={() => {this.props.appContext.setCount(this.props.appContext.count + 5)}}>
App Counter + 5
</button>
</div>
)
}
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
