[Solved] How to display createdAt timestamp from mongo collection?

react
1

Hello, I’m new to mongo, and meteor, so this might be very simple…

During the meteor tasks tutorial, when passing data to the mongo collection, there is a timestamp for “createdAt”.

How can I display this timestamp as a document with the rest of the collection?

In the server side, the collection is successfully inserted and returned in the console:

Meteor.startup(function() {
  // code to run on server at startup

  GrowData.insert({
    sensorName: "Temperature",
    sensorValue: "29",
    createdAt: new Date()
  });
  console.log(GrowData.find().fetch());
});

As per the tutorial, the following code displays the collection:

export default class Sensdata extends Component {
  render() {
    return (
      <li>
        {this.props.sensor.sensorName} - {this.props.sensor.sensorValue}
        {this.props.createdAt}
      </li>
    );
  }
}

There are no errors displayed in the console, the collection renders perfectly, but the time is simply not appearing.

Obviously using “this.props.createdAt” isnt working, so I was wondering how does one actually display the createdAt timestamp alongside the rest of the collection when it is rendered?

Thank you

2

Have you tried console.logging this.props.createdAt? I’m guessing there’s nothing there - given that every other prop is part of the sensor object which is coming from the same document, I would have to guess that createdAt is too. Try this.props.sensor.createdAt

At that point you will probably get an error for trying to render a date object, in which case try this.props.sensor.createdAt.toString()

1 Like
3

Thanks for your response!

You were correct in that console log of “this.props.createdAt” returned nothing, and “this.props.sensor.createdAt” returned ‘Violation: Objects are not valid as a React child’.

The next possible solution ‘this.props.sensor.createdAt.toString()’ returned an error of “Cannot read property ‘toString’ of undefined”

But I do feel like the toString() idea is in the right direction… does that error possibly mean that I must define createdAt in a variable, then pass it in?.. any other suggestions?

Just to see what happens, I changed the server side insert to include toString:

Meteor.startup(function() {
  // code to run on server at startup

  GrowData.insert({
    sensorName: "Temperature",
    sensorValue: "29",
    createdAt: new Date().toString()
  });
  console.log(GrowData.find().fetch());
});

This made the date prettier in the console, which is a good thing.

createdAt: ‘Sun Dec 02 2018 14:02:17 GMT-0500 (EST)’ }

I’ll keep playing around.

4

AFAIK, simply dropping the new part and using createdAt: Date() would insert it as a string on the server. You may want to insert it as a date object though - it can be easier to manipulate that way

The issue with running toString on a mongo date is probably because toString is a native JS Date method, and I guess it doesn’t work with Mongodb ISOdates. I’ve been using Moment.js for everything date-related for a while so I don’t remember the specifics.

EDIT: Actually I was wrong here. Looking back at the error, it sounds like the problem was with createdAt being undefined. Plus, .toString() should work per these docs: https://docs.mongodb.com/manual/reference/bson-types/#document-bson-type-date

Regardless, I’m glad it worked out

1 Like
5

For some reason I thought that using moment wouldn’t be a simple solution, but I went back to using moment.js, and found a working solution:

import moment from 'moment':

 <li>
       {this.props.sensor.sensorName} - {this.props.sensor.sensorValue} -
        {moment(this.props.sensor.createdAt).format("L LTS")}
</li>

Renders as: * Temperature - 29 -12/02/2018 2:22:36 PM

Thanks for your help!