Message.js

import React, { useEffect, useState } from 'react'
import jwt_decode from 'jwt-decode'

export default function Message({ message }) {
  const jwt = jwt_decode(localStorage.getItem('jwt'))
  const userID = jwt.userID

  return message.type === 'msg' || message.type === undefined ? (
    <div
      key={message.id}
      className={
        userID === message.author
          ? 'message message-sent'
          : 'message message-received'
      }
      style={{
        alignSelf: userID === message.author ? 'flex-end' : 'flex-start',
      }}>
      <span>{message.message}</span>
    </div>
  ) : message.type === 'img' ? (
    <img
      className={
        userID === message.author
          ? 'message message-sent'
          : 'message message-received'
      }
      style={{
        alignSelf: userID === message.author ? 'flex-end' : 'flex-start',
      }}
      src={process.env.REACT_APP_IP_PUBLIC + '/files/' + message.filename}
      alt={message.filename}
    />
  ) : (
    <a
      className={
        userID === message.author
          ? 'message message-file message-sent'
          : 'message message-file message-received'
      }
      style={{
        alignSelf: userID === message.author ? 'flex-end' : 'flex-start',
      }}
      href={process.env.REACT_APP_IP_PUBLIC + '/files/' + message.filename}
      download={message.filename}
      target='_blank'
      rel='noreferrer'>
      {message.filename}
    </a>
  )
}