Get the respective date in the format dd.mm.yyyy from a Json using the map method

Question

I have a problem. I have a json in and inside this is a string with the format dd.mm.yyyy. I would like to output within a loop for each month, once only the day, the day and the month and the complete date. Unfortunately, if I write it as I am doing right now. I get 1527 displayed.

How do I get the day, month, and complete date back in a loop?

// import React, { useState, useEffect } from 'react'

function Test() {
  const days = [
    "Januar",
    "Februar",
    "März",
    "April",
    "Mai",
    "Juni",
    "Juli",
    "August",
    "September",
    "Oktober",
    "November",
    "Dezember",
  ];
  const matchDays = [
    { date: new Date('12.05.2022') },
    { date: new Date('01.06.2027') },
  ];
  return (
    <div>
      {
        days &&
        <ul class="days">
          {
            days.map((d, i) =>
              <li>
                { d }
                <span class="dates">
                  {
                    matchDays.map((d, i) =>
                      <span class="date"> { d.date.getDate() } </span>
                    )
                  } 
                </span>
              </li>
            )
          }
        </ul>
      }
    </div>
  );
}

// export default Test
ReactDOM.render(<Test/>, document.querySelector("#test"));

<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="test"></div>

Desired output

12 
12.05
12.05.2022
01
01.06
01.06.2027

Answer 1

From my above comments ...

"1/2 ... a good approach which mostly works is to take a step back and separate the data transformation process (e.g. filtering / mapping / reducing ) from UI related ones. One gets a more clear view at the problem due to e.g. faster iteration based on better testing possibilities (here unit tests for the data layer)."

"3/3 ... regarding the output ... since each date apparently should just be rendered twice partially and once in its German locale string form why does the OP not provide the date directly as string and just splits it like e.g. ... '12.05.2022'.split(''.)?"

Thus said, each simplified date-item from an array like ...

const matchDays = [
  { date: '12.05.2022' },
  { date: '01.06.2027' },
];

... will be mapped into an array of date parts based on simply splitting and partially rejoining it.

const matchDays = [
  { date: '12.05.2022' },
  { date: '01.06.2027' },
];

const renderData = matchDays
  .map(({ date }) => {
    const [day, month] = date.split('.');

    return [day, [day, month].join('.'), date];
  });

console.log({ renderData });

.as-console-wrapper { min-height: 100%!important; top: 0; }

Based on the above example code a 2nd refactoring step would change the pure data mapping into a combined data/UI render task.

// import React, { useState, useEffect } from 'react'

function Test() {
  const matchDays = [
    { date: '12.05.2022' },
    { date: '01.06.2027' },
  ];
  return (
    <ul class="date-items">
      {
        matchDays.map(({ date }) => {
          const [day, month] = date.split('.');
          return (
            <li>
              <ul class="date-partials">
                <li>{ day }</li>
                <li>{ [day, month].join('.') }</li>
                <li>{ date }</li>
              </ul>
            </li>
          )
        })
      }
    </ul>
  );
}

// export default Test
ReactDOM.render(<Test/>, document.querySelector("#test"));

<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="test"></div>

Answer 2

You can simply iterate over matchDays and render 3x elements with each part:

  return (
    <ul>
      {matchDays.map((day) => (
        <>
          <li>{day.date.getDate()}</li>
          <li>
            {day.date.getDate()}.{day.date.getMonth() + 1}
          </li>
          <li>
            {day.date.getDate()}.{day.date.getMonth() + 1}.{day.date.getFullYear()}
          </li>
        </>
      ))}
    </ul>
  );

Each <li> contains either day, day & month, or day & month & year. Note that I've used <li> here as an example - choose what you need in your app.

Result:

• 1
• 1.10
• 1.10.2002
• 5
• 5.11
• 5.11.2022
• 27
• 27.1
• 27.1.2022

Edit: Fixed month +1 to avoid 0 based value.