How to show the time when task was created by using react

Question

I want to show the time when a task was created in my todo app using ethereum.

I get task which include content and time, and set task by state in this code.

constructor(props) {
    super(props)
    this.state = {
    tasks: [],
  }
}
・・・
for (var k = 1; k <= taskCount; k++) {
  const task = await todoList.methods.tasks(k).call()
  this.setState({
    tasks: [...this.state.tasks, task]
  })
}

Then, I use map to show tasks array and time.

{ this.props.tasks.map((task, key) => {
  return(
    <div key={key}>
      <p>{task.content}</p>    
      <p>{task.time}</p>
    </div>
  )
})}

As a result, I got numbers like this

1555650125
1555651118
1555651169
1555664902

So, I changed {task.time} to {Date(checkin.checkintime)} on order to convert that number to normal time. However, the result shows only number.

Sat Apr 20 2019 09:20:57 
Sat Apr 20 2019 09:20:57 
Sat Apr 20 2019 09:20:57 
Sat Apr 20 2019 09:20:57 

I wrote this code in order to check Data() is working, then I could get correct answer.

for (var k = 1; k <= taskCount; k++) {
  const task = await todoList.methods.tasks(k).call()
  const tasktime = new Date(task.checkintime * 1000)
  console.log(tasktime)

  this.setState({
    tasks: [...this.state.tasks, task]
  })
}

Fri Apr 19 2019 14:02:05 
Fri Apr 19 2019 14:18:38 
Fri Apr 19 2019 14:19:29 
Fri Apr 19 2019 18:08:22 

Could you give me any advise to show the time inside map?

Answer 1

In this section, I assume, task is the new task which was just created. You can update the task.checkintime property, with your time string:

const task = await todoList.methods.tasks(k).call()
task.checkintime = new Date(task.checkintime * 1000).toDateString();

this.setState({
    tasks: [...this.state.tasks, task]
})

Which means it'll then be accessible within your map:

{ this.props.tasks.map((task, key) => {
return(
  <div key={key}>
    <p>{task.content}</p>    
    <p>{task.checkintime}</p>
  </div>
)

This will take https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString and assign a string representation of your date on task.checkintime.

If you want to do different formatting, take a look at How to format a JavaScript date so you can formatted your Date object.