React_Hooks useContext
useContext passes value, and can pass value across components -> Sun
1. Create two components ReactHooksUseContextF (parent component), ReactHooksUseContextC (child component)
2.ReactHooksUseContextF (parent component) The parent component uses createContext to create context
import React,{
useState,createContext} from 'react'
import ReactHooksUseContextC from './ReactHooksUseContextC'
export const CountContext = createContext()
const ReactHooksUseContextF = () => {
const [count,setCount]=useState(0)
return (
<div>
<button onClick={
()=>setCount(count+1)}>Click Me</button>
<p>You Clicked {
count} Times</p>
<CountContext.Provider value={
count}>
{
}
<ReactHooksUseContextC/>
</CountContext.Provider>
</div>
)
}
export default ReactHooksUseContextF
3.ReactHooksUseContextC (subcomponent) subcomponent uses useContext to obtain context
import React,{
useContext} from 'react'
import {
CountContext} from './ReactHooksUseContextF'
const ReactHooksUseContextC = () => {
const context = useContext(CountContext)
return (
<div>
<h3>{
context}</h3>
</div>
)
}
export default ReactHooksUseContextC