Отобразить переменную в HTML React

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>
    )
};

Я пытаюсь визуализировать время в текстовом теге, но он продолжает выдавать ошибку. Как мне решить эту проблему. Это в рамках реагирования.

javascript html reactjs

0

user11528729 27 Окт 2019 в 00:24

Answer 1

Функция getTime должна возвращать строку, а не объект, и вы должны вызывать ее в 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>

2

Ori Drori 26 Окт 2019 в 21:28

Answer 2

Так как вы не поделились ошибкой, я думаю, это потому, что вы возвращаете функцию в своем 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>
    )
};

1

Melchia 26 Окт 2019 в 21:28

Отобразить переменную в HTML React

2 ответа

Похожие вопросы

Новые вопросы

javascript