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

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?

user2340824 · Accepted Answer · 2019-04-21T22:28:26.953

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.

edited Apr 21 '19 at 22:28

answered Apr 21 '19 at 20:39

user2340824

2,142
2
15
19

Thank you for your answer. When I tried, this error come up "Objects are not valid as a React child (found: Sun Apr 21 2019 21:08:53. If you meant to render a collection of children, use an array instead." – gnxvw Apr 21 '19 at 22:16
1

Sorry, this is because we have just assigned a Date object to `task.checkintime`. I've updated my answer to convert the Date object to a string representation with some links to different formatting. – user2340824 Apr 21 '19 at 22:29
Thank you so much. One more question. I got only `Apr 21 2019`, but I also want to show `hour` and `minute`. Do you have any idea? I couldn't find how to do that. – gnxvw Apr 21 '19 at 23:26
1

You can replace `.toDateString()` with `.toLocaleString()`, this has many more options available to it, listed here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString. Read up on it within this https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date/34015511#34015511 where it's spoken about. – user2340824 Apr 21 '19 at 23:32
Thank you so much!! I greatly appreciate your support !! – gnxvw Apr 21 '19 at 23:38
1

No problems! If you could accept my answer that would be fantastic, thank you :) – user2340824 Apr 21 '19 at 23:40
Sorry I got to do that. Done! – gnxvw Apr 21 '19 at 23:46

score 0 · Answer 2 · answered Apr 21 '19 at 20:21

task.time is time defined by the UNIX time epoch system. From this you can convert in to any format. Not sure what you want to show but new Date(task.time) seems like a step in the right direction. You can refer to the Date reference or Moment.js if it's not enough.

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

2 Answers2