I have created a Count down timer component and I have a Button near this component
and I want when users click on this button, resets the timer
and for doing this I should change the child state
I found the solution for changing parent state from the child but I don’t find the solution to this
can it be solved with ref ?? ( my timer component is a functional component )
Advertisement
Answer
React ref forwarding is the solution: This blog will describe more: https://medium.com/javascript-in-plain-english/react-refs-both-class-and-functional-components-76b7bce487b8
import React, { useState } from "react"; import "./styles.css"; class ChildClass extends React.Component { constructor(props) { super(props); this.state = { timer: 100 }; this.resetTimer = this.resetTimer.bind(this); } resetTimer() { this.setState({ timer: 0 }); } render() { let { timer } = this.state; return <span>{timer}</span>; } } const ChildFunction = React.forwardRef((props, ref) => { const [timer, setTimer] = useState(100); const resetTimer = () => { setTimer(0); }; React.useImperativeHandle(ref, ()=>({ resetTimer })); return <span>{timer}</span>; }); export default function App() { let childClassRef = React.createRef(null); let childFuncRef = React.createRef(null); const resetClassTimer = () => { childClassRef.current.resetTimer(); }; const resetFuncTimer = () => { childFuncRef.current.resetTimer(); }; return ( <div className="App"> <ChildClass ref={childClassRef} /> <button onClick={resetClassTimer}>Reset</button> <br/> <ChildFunction ref={childFuncRef} /> <button onClick={resetFuncTimer}>Reset</button> </div> ); }
I have added both ref forwarding with class components and functional components. It is same with both React.js and React native.