在 React html 中渲染变量

Question

const getTime = () => {
    const today = new Date();
    const time = today + ' ' + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return {time};
}

export default function UpdateButton() {
    const classes = useStyles();
    const today = new Date();
    const time = today + ' ' + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return (
        <div>
            <Button variant="contained" className={classes.button}>
                Update
            </Button>
            <text>Last Updated: {getTime}</text>
        </div>
    )
};

I am trying to render the time in the text tag but it keep throwing error. How do I resolve this issue. This is under react framework.

Answer 1

The getTime function should return a string and not an object, and you should call it in the JSX - getTime() :

 const getTime = () => { const today = new Date(); const time = today + ' ' + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); return time; } function UpdateButton() { return ( <div> <button variant="contained"> Update </button> <text>Last Updated: {getTime()}</text> </div> ) }; ReactDOM.render( <UpdateButton />, root );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 2

SInce you didn't share the error I'm going to guess it's because you return a function in your JSX:

const getTime = () => {
    const today = new Date();
    const time = today + ' ' + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return time;
}

export default function UpdateButton() {
    const classes = useStyles();
    const today = new Date();
    const time = today + ' ' + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    return (
        <div>
            <Button variant="contained" className={classes.button}>
                Update
            </Button>
            <text>Last Updated: {getTime()}</text>
        </div>
    )
};