0

I build chat application using firestore as backend. Now I want when some user send a message there should be a time of that message.

there is some error ie.

react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {seconds, nanoseconds}). If you meant to render a collection of children, use an array instead. at throwOnInvalidObjectType (react-dom.development.js:14887:1)

react_devtools_backend.js:4012 The above error occurred in the component:

I wrote this code to send data on firebase

messages: arrayUnion({
  id: uuid(),
  text,
  img: downloadURL,
  senderId: currentUser.uid,
  date: Timestamp.now(),
  // time: Date().get
});

and when a fetch data from firebase

<div>
  <p>
    {message.text}
    <span>{message.date && <span>{message.date}</span>}</span>
  </p>
  {message.img && <img src={message.img} alt="" />}
</div>;

I want to show message time with message. Note: I map through messages like :

messages.map(message => {})
Ahmed Sbai
  • 10,695
  • 9
  • 19
  • 38
Naval Nehra
  • 11
  • 2

1 Answers1

0

Note: Edited

In your original code, you have:

message.date && <span>{message.date}</span>

But according to the error message, message.date is a JavaScript object which React does not know how to display. If your message object comes directly from Firestore, message.date would be a JavaScript object that looks something like this:

{
  nanoseconds: <something>, 
  // some other Timestamp properties
}

React does not know how to display this. Thus, try turning message.date into a string and then displaying it. This could involve many methods depending on how you want to implement it and format the final string. Many ways are provided in How do I convert a Firestore date/Timestamp to a JS Date()? when accessing the time.

Neil Lu
  • 169
  • 1
  • 12
  • @NavalNehra Specifically, maybe look at this answer to see how to turn a Firebase Timestamp object into a string https://stackoverflow.com/a/62742504/8109320 Then, you can format it however you want. – Neil Lu Feb 18 '23 at 19:00
  • thank for reply. can you tell me about one more problem? in firebase date is stored as ```February 18, 2023 at 9:45:13PM ``` but i want to store as ```21:45``` ie "hh:mm" 24h formate how can I do that? – Naval Nehra Feb 18 '23 at 19:16
  • I do't think you can modify what you see in the Firbease console, and you can't change how Firbease stores the timestamp. You can, however, turn `February 18, 2023 at 9:45:13PM` into `21:45` format when displaying it to the users. For example, if you have converted your `message.date` into a JavaScript `Date` object, you can then follow the method in this answer to turn it into a 24h format: https://stackoverflow.com/a/17322318/8109320 – Neil Lu Feb 18 '23 at 19:23
  • 1
    yeahhh... now its working fine. I add this one value--> ``` chatTime: Timestamp.now().toDate().toLocaleTimeString('en-US', {hour12: false}) ``` – Naval Nehra Feb 18 '23 at 19:48
  • Nice to hear that! – Neil Lu Feb 18 '23 at 19:52