CODEWITHSUNDEEP
javascriptreactjs
Richard KeMiKaL GeNeRaL Denton
Richard KeMiKaL GeNeRaL Denton

Reputation: 421

JS expression not working as part of a string in ReactJS?

Could you please help with something?

I’m trying to do the following…

import {chosenIpAddress} from './socketEvents.js';

const socket = socketClient(`http:// ${chosenIpAddress} :8081`);

…but no matter what I try, it simply ignores my expression and sees it as http://:8081. I’ve tried with plus signs, commas, backticks, quotation marks, shouting, and threatening it, but to no avail.

I can log out the IP address, so I know it’s populated, but as part of the string it just gets ignored and it’s driving me crazy!

Thanks in advance xxx

P.S... I've seen some similar questions, but these do not help with mine, hence the new question.

Update: As requested, this is my export...

let chosenIpAddress = "";

function  chosenTank(tank) {
    socket.emit('chosen tank', tank);
    console.log('Tank', tank);
    chosenIpAddress = tank.IpAddress;
}

export {
    chosenIpAddress,
};

Upvotes: 1

Views: 261

Answers (2)

Richard KeMiKaL GeNeRaL Denton
Richard KeMiKaL GeNeRaL Denton

Reputation: 421

So, for anyone who runs into this problem, I worked it out. The answer given is kind of getting there, but not right, I tried that (and variations of it), but it/they didn't work.

Basically in my case, the IP address was being set when the application started, so the chosenIpAddress would always be an empty string as it's being set before the connections had taken place, no variations of exporting, recalling, or function building would've done the job.

To get around this, I let the initial connection take place with a 'placeholder' socketClient to stop the application from crashing...

let socket = socketClient('http://:8081');

...and then when ready, I called to repopulate the IP address when the component mounted from the frontend...

Called from front end when ready...

componentDidMount() {
    frontEndConnected();
}

Add IP address as required...

function frontEndConnected() {
    socket = socketClient(`http://${chosenTankIpAddress}:8081`);
}

...which works a charm.

Upvotes: 0

Cory Danielson
Cory Danielson

Reputation: 14501

You need to export a function that returns the IP address when called.

The file importing the chosenIpAddress has the original value (empty string), but it will never be updated even when chosenTake is called. Javascript strings are copied by value, so if you update the original variable, any other references to it will not be updated.

Example of strings copied by value:

chosenIpAddress = "";
x = chosenIpAddress; // x is ""
chosenIpAddress = "localhost"; // chosenIpAddress is "localhost", x is still ""
// This same issues applies to imports/exports.

So do something like this in your ip address file:

let chosenIpAddress = "";

function chosenTank(tank) {
    socket.emit('chosen tank', tank);
    console.log('Tank', tank);
    chosenIpAddress = tank.IpAddress;
}

function getChosenIpAddress() {
    // This can be "" if chosenTank is not called first
    return chosenIpAddress;
}

export {
    getChosenIpAddress,
};

Also, as pointed out in the comments, you need to call chosenTank before you access the chosenIpAddress, or you're going to get an empty string every time.

Further, you'll also need to build the socket string as a function as well, so that it gets the most up-to-date value from getChosenIpAddress when it's called:

import {getChosenIpAddress} from './socketEvents.js';

function getChosenSocket() {
    return socketClient(`http://${getChosenIpAddress()}:8081`);
}

Upvotes: 5

Related Questions