ReactJS - setting variable from 2 separate useState

user_8701077 0
Viewed 80

Background

I am attempting to set a variable based on two separate button-groups using onClick() to update the useState.

The first group will record either "data1", "data2", or "data3".

The second group will record "0", "1", or "3".

I am looking for the end result to be a variable which I can use to select which group of data to pull.

The variable should look something like this "data10". (where button 1 was selected in both groups.)

Current code

  const [bigChartData, setbigChartData] = React.useState("data1");
  const setBgChartData = (name) => {
    setbigChartData(name);
    (name+bigChartTime);
  };
  const [bigChartTime, setbigChartTime] = React.useState("0");
  const setBgChartTime = (name) => {
    setbigChartTime(name);
    console.log(bigChartData+(name));
  };

Further down the code the following presents the dynamic data

                <div className="chart-area">
                  <Line
                    data={chartExample1[bigChartData]}
                    options={chartExample1.options}
                  />
                </div>

The Problem

I receive the following error

Expected an assignment or function call and instead saw an expression no-unused-expressions

I understand that this is telling me I can't use an expression here, but I am little lost for how to otherwise build this

What I've tried

  • Set the { } around this but it still gives the same error.
  • Set the ( ) around this but it still gives the same error.
  • Using console.log(name+bigChartTime); in place of line 4, it presents the information I expect to the console without an error.

If there is anyway to workaround this or if I need to rework in a different way, all help is appreciated!

jsx reactjs
1 Answers

Your code is kinda messy and it is not exactly clear what you want to achieve. I would suggest you to keep your state variables together and separate them from event handlers visually. Also, differentiate the event handler names from the variable state setters: setbigChartData and setBgChartData have pretty similar names which makes it pretty hard to keep track of what's going on in your code.

Now, as you've already noticed, you get the Expected an assignment or function call and instead saw an expression no-unused-expressions error because you're using an expression that basically does nothing: (name+bigChartTime);. I am not sure if you're trying to assing this to a variable or?

You need the concatenated result of both bigChartData and bigChartTime. You don't need a separate state variable for this. You should avoid introducing a separate state variable for results that are based on other state variables, especially when this result is easily calculatable. So, I would suggest for you to just use:

`${bigChartData}${bigChartTime}`

when you need the concatenated result or store in a simple non-state variable before using it. In the end, you just need something like this:

const [bigChartData, setbigChartData] = React.useState("data1");
const [bigChartTime, setbigChartTime] = React.useState("0");

const handleChartDataChange = (name) => {
    setbigChartData(name);
};

const handleChartTimeChange = (name) => {
    setbigChartTime(name);
};

As you haven't given more context on the usage of the concatenated result, this is generally the way to go.

Side note: Good job with the formatting of your question. It's a rare occurrence. You should work a bit more on the question clarity, though.

user_84129590
Related