How to make unique date for every element from array?

Question

I'm making React app and I have such problem:

For instance, I have an array container and it looks like this:

const container = [
 {item: '1'},
 {item: '2'},
 {item: '3'},
 {item: '4'}
]

Then I want to make in html 4 columns and each of them has one value fron this array.. So i'm using this:

<div>
 {container.map(t =>
  <div className='box'>{t.item}</div>
 )}
</div>

So it'll make 4 div with different values: 1/2/3/4

---

And now my question is here: how to make own date (starting from toda to ...) for every box?

1. First item = Monday, 8 June
2. Second item = Tuesday, 9 June

etc.

I did something like this, but it shows only current day, bu I NEED to show the next days starting from today: 8,9,10,11 etc (the last date doesn't matter it can be 25 June)

let x = new Date();

let fullDate = x.toLocaleString('en-gb', { day:'numeric' , weekday: 'long', month: 'long' });

P.S. When I'm using for It shows all dates in every column.

---

You can see example on the picture:

EVERY block has current day.. But I need [you can see above]

---

console.log:

Answer 1

you can generate random Dates with this function

function randomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}
//result
const myRandomDate = randomDate(new Date(2020, 6, 8), new Date())
console.log(myRandomeDate)

adding dates to the arr of objects

const newContainer =[] 
container.forEach(c=>{
  newContainer.push( { item:c.item , date:randomDate(new Date(2020, 6, 8), new Date()) })
})

Answer 2

One way to do this is by adding the date property in each container objects.

you do not mention it in your question but by the example I understand you require that the dates be increased from day to day. For this you can add N days to the current date, take a look at the following example, the addDays function adds the number of days you spend per argument to today

const container = [
  {
    item: 1,
    date: new Date(),
  },
  {
    item: 2,
    date: addDays(1),
  },
  {
    item: 3,
    date: addDays(2),
  },
  {
    item: 4,
    date: addDays(3),
  },
];

function addDays(day) {
  const date = new Date();

  date.setDate(date.getDate() + day);

  return date;
}

console.log(container);

Update 0

// container state after fetching data
const container = [
  {
    item: 1,
  },
  {
    item: 2,
  },
  {
    item: 3,
  },
  {
    item: 4,
  },
];

// container state after transform
const list = container.map((entry) => ({
  ...entry,
  date: addDays(entry.item),
}));

function addDays(day) {
  const date = new Date();

  date.setDate(date.getDate() + day);

  return date;
}

console.log(list);

Update 1

In order to format dates you can try something like this

function format(date) {
  const month = date.getMonth()
  const day = date.getDate()

  return `${month}-${day}`;
}

And call format method in this way

function addDays(day) {
  const date = new Date();

  date.setDate(date.getDate() + day);

  return format(date);
}

You can read about date formatting in this super popular question

Then in react container list it becomes simple

<div>
  {container.map((t) => (
    <div className="box">
      <span>{t.item}</span>
      <span>{t.date}</span>
    </div>
  ))}
</div>;