So I'm trying to use a react Timer in one of my class ponents. I figured out how to connect it, but now I need to save the time into the parent's state. How can I go upon doing that? Since the time is being measured on the child ponent. So essentially I need to save the time measured from the child ponent to the parent's state.

So I'm trying to use a react Timer in one of my class ponents. I figured out how to connect it, but now I need to save the time into the parent's state. How can I go upon doing that? Since the time is being measured on the child ponent. So essentially I need to save the time measured from the child ponent to the parent's state.

• javascript
• reactjs

Share Improve this question Follow asked Oct 11, 2021 at 14:48 KyanoKyano 18411 silver badge88 bronze badges 1

• You can use useState, see this stackoverflow./questions/69497555/… using – FranCarstens Commented Oct 11, 2021 at 15:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The phrase that es to mind is Lifting State up. React has a 'top-down' data flow. So your state needs to be initialised in the parent ponent and passed down to the child ponents that need it. e.g. (pseudocode, may not work)

function Parent() {
  const [text, setText] = useState('hello world')

  return (
    <>
      <Child text={text} />
      <OtherChild text={text} setText={setText} />
    </>
  )  
}

function Child({ text }) {
  return <p>{text}</p>
}

function OtherChild({ text, setText }) {
  return (
    <input
      onChange={e => setText(e.target.value)}
      value={text} />
  )
}

You'll need to pass a function that updates the parent's state to the child ponent via props:

In this particular example, both the child and the parent props have a state hook that keeps track of time - the parent's updateParentTime function get's called any time the child's time value changes.

NOTE: it's probably not necessary to keep state in both places...I was just showing an example. If the parent needs has state for time, you could also just pass that down to the child ponent

const Parent = (props) => {
   const [time, setTime] = useState(0);

   const updateParentTime = (t) => {
      setTime(t);
   }
 
  return (
    <Child updateParentTime={updateParentTime}/>
  )
}

const Child = (props) => {
   const {updateParentTime} = props;
   const [time, setTime] = useState(0);

   useEffect(() => {
      updateParentTime(time)
   }, [time]);

   return (
     <div>
       {/* something goes here */}
     </div>
   )
}

The following defines two React ponents: Parent and Child.

Parent declares a piece of state named time and a mutator method for that state named setTime.

The current value of time is passed to Child via the prop named time.

setTime is passed to Child via the prop named notify.

Child configures a timer that invokes notify (ie setTime) once a second.

Invoking notify tells React that a state change has occurred and triggers a re-rendering of both ponents, causing the time to be rendered by each ponent, once every second.

pre { border: 1px solid black; padding: 10px; }

<script src="https://unpkg./@babel/standalone@7/babel.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<script type="text/babel">
const { useState, useEffect } = React

const Parent = () => {
  const [ time, setTime ] = React.useState('--- --- -- ----')
  return <pre>
           Parent: { time }
           <Child notify={setTime} time={ time }/>
         </pre>
}

const Child = ({ notify, time }) => {    
    useEffect(()=>{
      const id = setInterval(() => notify(Date()), 1000)
      return () => clearInterval(id)      
    })

    return <pre>Child: {time}</pre>
}

ReactDOM.render(<Parent/>, document.querySelector('main'))
</script>
<main></main>