Subscriber.js

import React from 'react';

import { useSubscription } from 'mqtt-react-hooks';

export default function Subscriber() {
  /* Message structure:
   *  topic: string
   *  message: string
   */
  const { message } = useSubscription([
    'test',
  ]);

  const renderMessage = () => {
      if(message){
        return <span>{message.topic} - {message.message}</span>
      } else{
        return <span>none</span>
      }
    }

  return (
    <>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {renderMessage()}
      </div>
    </>
  );
}