Get React Hook Value from outside the functional component

user_14163721 0
Viewed 780

I have a functional component where there is a timer running and the timer updates
var [time, setTime] = useState(180000);

( i didn't show the code for the timer as i don't believe it's needed to answer my question)

this is found in countDownTimer.js as seen below

function CountDownTimer(props) {

 var [time, setTime] = useState(180000);

}

Then in another tab I have the function

updateGame() { 

}

is there any way to get the value stored in

var [time, setTime] = useState(180000);

into the updateGame() function

I want to achieve something like this

function CountDownTimer(props) {

 [time, setTime] = useState(100);

export const GetTime = () => {
const time = time
return time 
}

}

import {getTime} from "./countDownTimer.js"

updateGame() { 

const time = getTime()

console.log(time)
//prints 100 
}

silly attempt at it but hopefully you get the point.

react-hooks reactjs
3 Answers

E.g. define your hook in the parent App component, and pass your time and setTime as prop to CountDownTimer component. Pass time also to UpdateGame as prop. Set your time in CountDownTimer and you can also read the time from UpdateGame.

App.js

import {useState} from 'react'
import CountDownTimer from './CountDownTimer';
import UpdateGame from './UpdateGame';

    function App() {
      const [time, setTime] = useState(100);
    
      return (
        <div className="App">
           <CountDownTimer time={time} setTime={setTime}></CountDownTimer>
           <UpdateGame time={time}></UpdateGame>
        </div>
      );
    }
    
    export default App;

CountDownTimer.js

export default function CountDownTimer(props) {

    const handleClick = ()=>{
        props.setTime(200)
    }

    return (
        <div>
            <button onClick={handleClick}>{props.time}</button>    
        </div>
    )
}

UpdateGame.js

import React from 'react'

export default function UpdateGame(props) {
    return (
        <div>
            {'time from updateGame: '+ props.time }
        </div>
    )
}
user_91750970

You could implement the following scenario

  1. Use Redux
  2. use context
  3. create a custom hook useTime that handles this scenario and call the useTime in the component you wish to use.

Please refer to the following code for the custom hook.

import React, {useState} from "react";

// extract the logic of useTime to a separate file so it can be used in other components as well
const useTime = () => {
const [time,setTime] = useState(18000);
  // your implementation
  return [time,setTime];
}

export default function GetTime() {
  const [time,setTime] = useTime(); // useTime is a custom hook
  // your implementation
  return (
    <div>
    </div>
  );
}
user_89178980

I think it can be done with redux or global state.

  1. using redux

you can register time to store as state and use useSelector to deploy in UpdateGame component.

  1. using global state.

you can create state in App.js(or the ancestor component including those components) with useSelector and pass setState function as props to CountDownTimer and use useEffect hook to call setState(time) with change of time. Besides, you pass state to UpdateGame props. Then you can detect time change in UpdateGame. Please reference the state rendering!

user_169888410
Related