Pass React Component State to Another File

Question

In a backend file called serialcomm.js, I have a variable called 'mode'. I want to set mode's value to the same value as the state 'mode' from my frontend component Pacemode(). How would I pass Pacemode's state value to the serialcomm.js file? I'm using React.js, Node.js and SerialPortIO.js.

The Pacemode.js code:

/*
This navbar component will let the user select which pacing mode interface to display on the page.
It will control rendering the view
*/
import React from 'react';
import '../../stylesheets/PaceMode.css';
import Button from 'react-bootstrap/Button';
// components
import AOO from './AOO';
import AAI from './AAI';
import VOO from './VOO';
import VVI from './VVI';
import VVIR from './VVIR';
import VOOR from './VOOR';
import AOOR from './AOOR';
import AAIR from './AAIR';
import DOO from './DOO';
import DOOR from './DOOR';

const PaceMode = () => {

    const [mode, setMode] = React.useState('VOO');

    function renderInterface (modeVal) {
        switch(modeVal) {
            case 'VOO': 
                return <VOO />;
            case 'VVI':
                return <VVI />;
            case 'AOO':
                return <AOO />;
            case 'AAI':
                return <AAI />;
            case 'VOOR':
                return <VOOR />;
            case 'VVIR':
                return <VVIR />;
            case 'AOOR':
                return <AOOR />;
            case 'AAIR':
                return <AAIR />;
            case 'DOO':
                return <DOO />;
            case 'DOOR':
                return <DOOR />;
            default:
                return <h2>{mode} Interface Goes Here</h2>;
        }
    }

    return (
        <div className='paceModeSelector'>
            <span style={{display: 'flex', minWidth: '100%'}}>
                <Button variant='secondary' className='paceBtn' onClick={() => {setMode('VOO')}} active={mode === 'VOO' ? true : false}>VOO</Button>
                <Button variant='secondary' className='paceBtn' onClick={() => {setMode('VVI')}} active={mode === 'VVI' ? true : false} >VVI</Button>
                <Button variant='secondary' className='paceBtn' onClick={() => {setMode('AOO')}} active={mode === 'AOO' ? true : false} >AOO</Button>
                <Button variant='secondary' className='paceBtn' onClick={() => {setMode('AAI')}} active={mode === 'AAI' ? true : false} >AAI</Button>
            </span>
            {/* interface panel will use a switch to decide which component to render based on state. */
                renderInterface(mode)            
            }
        </div>
    );
}

export default PaceMode;

The serialcomm.js code:

var serialport = require('serialport');
var Readline = serialport.parsers.Readline;

var port = new serialport('COM4',{
  baudRate: 115200,
  //parser: new Readline("\r\n")
})
var buffer = Buffer.alloc(5);
var currentMode; // want to assign value based on the mode from Pacemode.js
console.log(currentMode);

Answer 1

Solved this on my own eventually. I setup a backend with Express.js and created a POST request to send the data to the serialport.