How can i hardcode the date in this function using next js

Question

export default function BudgetDate() {
  const month = month.toLocaleString("de-de", { month: "long" });
  const year = year.getFullYear();
  const day = day.toLocaleString("de-de", { day: "2-digit" });

  return (
    <div className="expense-date">
      <div className="expense-date__month"></div>
      <div className="expense-date__year"></div>
      <div className="expense-date__day"></div>
    </div>
  );
}

This is a component called BudgetDate im coding. It' going to be nested in another component called BudgetBar.

import styles from "./BudgetBar.module.css";

export default function Budgetbar() {
  return (
    <div className={styles.wrapperDiv}>
      <button className={styles.basicBar}>
        <div className={styles.date}>
          <div>Februar</div>
          <div>2022</div>
          <div>05</div>
        </div>
        <div className={styles.item}>Sony Playstation</div>
        <div className={styles.amount}>500 Euro</div>
      </button>
    </div>
  );
}

My goal is to replace

<div className={styles.date}>
          <div>Februar</div>
          <div>2022</div>
          <div>05</div>
        </div>

with simply

<BudgetDate />

in order to use correctly formatted date.

However, my problem is, that i don't know how to write code inside the BudgetDate component. I want do hardcode the Year, the date and the month between the divs inside the BudgetDate and use the .toLocaleString methods. What is a way to archive that?

Please show us all the code. Currenlty `month`, `year` and `day` are undefined when calling those functions. Also please show desired outcome. — 0stone0, Mar 31 '22 at 10:39

0stone0 · Answer 1 · 2022-03-31T11:18:49.107

I'd pass a date object with the desired date to the function.

Then you can paste the toLocaleString inside the jsx using the {} syntax:

const { useState } = React;

function BudgetDate(date) {
  return (
    <div className="expense-date">
      <div className="expense-date__month">{date.toLocaleString("de-de", { month: "long" })}</div>
      <div className="expense-date__year">{date.getFullYear()}</div>
      <div className="expense-date__day">{date.toLocaleString("de-de", { day: "2-digit" })}</div>
    </div>
  );
}

const Example = () => {
  
    // Today
    const date = new Date();
    
    // Hardcoded 
    //const date = new Date('2020-01-01');
    
    return (  
        <div>
            {BudgetDate(date)}
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

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

score 0 · Accepted Answer · answered Mar 31 '22 at 10:51

0

To include a variable in JSX, you need to use { variable_name } in the tags.

const month = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)).toLocaleString("de-de", { month: "long" });
const year = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)).getFullYear();
const day = new Date(Date.UTC(2012, 11, 20, 3, 0, 0)).toLocaleString("de-de", { day: "2-digit" });
return (
      <div className="expense-date">
      <div className="expense-date__month">{month}</div>
      <div className="expense-date__year">{year}</div>
      <div className="expense-date__day">{day}</div>
    </div>
)

You can add the expression directly in {} instead of using variable

answered Mar 31 '22 at 10:51

Hari Prasad

461
1
3
9

Why would you do `new Date(Date.UTC(2012, 11, 20, 3, 0, 0))` 3 times? – 0stone0 Mar 31 '22 at 11:17
sorry, I didn't have any variables with 'month', 'year' and 'day'. so I just took a random date from web. Nothing it will matters for the answer. – Hari Prasad Mar 31 '22 at 11:53

How can i hardcode the date in this function using next js

2 Answers2