ReactJS timestamp

user_13398868 0
Viewed 293

Here is my code -

const [time, setTime] = useState('')

const getRefresh = () => {
        pageContext.refreshList()
        var today = new Date()
        var currentTime = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
        setTime(currentTime)
    }

<div className="bttn-layout">
    <LastRefreshed getRefresh={time}/>
    <Button label="Refresh" onClick={e =>getRefresh()} />
</div>

Here is the code in my 'LastRefreshed' component -

const LastRefreshed = (props) => {

   
    return (
        <div>
            <p>Last Refreshed: {props.time} </p>
        </div>

    )
}


export default LastRefreshed;

Ideally, when the refresh button is clicked, it will call the getRefresh function which updates a list on my home page as well as passing the current timestamp to 'time' state. This state is then used by my 'LastRefreshed' function and will therefore show the last refreshed timestamp. At the moment, the code above is not working. The getRefresh function is definitely being called however I am struggling with getting the time to show in my LastRefreshed component. I am wondering if it's because the state is not properly updating? Any help appreciated!

react-hooks typescript reactjs javascript
3 Answers
<div className="bttn-layout">
    <LastRefreshed time={time}/>
    <Button label="Refresh" onClick={e =>getRefresh()} />
</div>

You should change the props name of LastRefreshed to time.

user_142721270

change
<p>Last Refreshed: {props.time} </p> to <p>Last Refreshed: {props.getRefresh} </p>
or
<LastRefreshed getRefresh={time}/> to <LastRefreshed time={time}/>

The name of your prop parameter does not match the name used in the component

user_127535730

<LastRefreshed time={time}/>

Code:-

const [time, setTime] = useState('');

const getRefresh = () => {
        pageContext.refreshList();
        var today = new Date();
        var currentTime = today.getHours() + ':' + today.getMinutes() + ':' + today.getSeconds();
        setTime(currentTime);
    }

<div className="bttn-layout">
    // component property should be `time` instead of `getRefresh`
    <LastRefreshed time={time}/> 
    //Note:- As you are not passing any arguments, directly mention getRefresh function
    <Button label="Refresh" onClick={getRefresh} /> 
</div>

LastRefreshedComponent:-

Note:- Here followed the shorthand syntax of arrow function,

 // Also used object destructuring for the props
 const LastRefreshed = ({time}) =>  
             <div>
                <p>Last Refreshed: {time} </p>
            </div>;
    
    export default LastRefreshed;
user_33836930
Related