Using JS inside HTML with React

Question

I have the following code:

<div className=''>
  <div className='userLayout'>
  {localMessages.map((localMessage) => (
    <div className={`${userId}` === `${localMessage.uuid}` ? 'fromUserLayout userCurrentLayout' : 'fromUserLayout userOtherLayout'} >
      <div className={`${userId}` === `${localMessage.uuid}` ? 'user userCurrent' : 'user userOther'}>
      <p>{localMessage.content}</p>
      <p>{localMessage.timestamp}</p>
      { localMessage?.image && localMessage.image.length > 0 && <img style={{width: '100%', height: 'auth', marginBottom: 24 }} src={localMessage.image} alt='chat' /> } 
   </div>
  </div>)
  )}
</div>

which works, however, I want to convert my timestamp in localMessage.timestamp back to a date.
I know I could do this with something like:

let theDate = new Date(localMessage.timestamp)

but I can't remember (or figure out) how to use JS inside the map function.

I did try { let theDate = new Date(localMessage.timestamp) } but get parsing errors on the opening { (unexpected keyword 'let') and on theDate ( '}' expected)

Answer 1

You can do:

<div className=''>
  <div className='userLayout'>
  {localMessages.map((localMessage) => (
    <div className={`${userId}` === `${localMessage.uuid}` ? 'fromUserLayout userCurrentLayout' : 'fromUserLayout userOtherLayout'} >
      <div className={`${userId}` === `${localMessage.uuid}` ? 'user userCurrent' : 'user userOther'}>
      <p>{localMessage.content}</p>

      <p>{new Date(localMessage.timestamp).toDateString()}</p>

      { localMessage?.image && localMessage.image.length > 0 && <img style={{width: '100%', height: 'auth', marginBottom: 24 }} src={localMessage.image} alt='chat' /> } 
   </div>
  </div>)
  )}
</div>

Or instead of using toDateString() you can use toLocaleString() , toLocaleDateString() ... Doing just new Date(localMessage.timestamp) could return an object, which could reproduce an error inside a jsx tag.