מדריך ריאקט – react hooks | useContext

import React, { createContext, ReactElement, useState ,useEffect } from 'react'


export const Context = createContext();

export function ContextProvider({ children }) {
    const [gameStatus, startGame] = useState(false);
    return (
        <Context.Provider value={{gameStatus, startTheGame: startGame}}>
            {children}
        </Context.Provider>
    )
}

import React, { ReactElement, useContext } from 'react';
import logo from './logo.svg';
import './App.css';
import ButtonClicked from './buttonClicked';
import { Context } from './context';

function App(props: any): ReactElement<any> {
  
  const {startTheGame} = useContext(Context);

  return (
    
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <ButtonClicked />
          <button onClick={()=>startTheGame(true)}>Start the Game</button>
        </header>
      </div>
  );
}

export default App;

import React, { useContext, useEffect, useState } from 'react'
import { Context } from './context';

export default function ButtonClicked() {
   
    const [totalCrocs, addCrocs] = useState(0);
    const {gameStatus} = useContext(Context);

    useEffect(() => {
      
    },[totalCrocs]);

    useEffect(() => {
        
        return () =>{
            addCrocs(4)
          }
      }, []);
    return (
        <div>
            <p>
          {totalCrocs}
        </p>
        <button disabled={!gameStatus} onClick={()=>addCrocs(totalCrocs+1)}>
          click me
        </button>
        </div>
    )
}

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { ContextProvider } from './context';

ReactDOM.render(

  <React.StrictMode>
  <ContextProvider> <App /> </ContextProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();