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

Question

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,
};

It's an intermediary for 'emit' and 'on' events between devices. — Richard KeMiKaL GeNeRaL Denton
– Richard KeMiKaL GeNeRaL Denton, Commented Apr 2, 2018 at 16:33
Haha, yes. I can console log it out here, but as part of the string, it just gets ignored. — Richard KeMiKaL GeNeRaL Denton
– Richard KeMiKaL GeNeRaL Denton, Commented Apr 2, 2018 at 16:37
chosenTank is never called, so you export { chosenIpAddress: "" } — connexo
– connexo, Commented Apr 2, 2018 at 16:54

Cory Danielson · Accepted Answer · 2018-04-02 20:46:12Z

5

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.

https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0

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`);
}

edited Apr 2, 2018 at 20:46

answered Apr 2, 2018 at 16:59

Cory Danielson

14.5k4 gold badges47 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Richard KeMiKaL GeNeRaL Denton Over a year ago

Still the same. Logs out when selected, but is still ignored as part of the string.

Cory Danielson Over a year ago

You need to build the string as a function, too

Richard KeMiKaL GeNeRaL Denton Over a year ago

No, see my answer for the solution.

Richard KeMiKaL GeNeRaL Denton · Accepted Answer · 2018-04-04 23:12:44Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related