How to extract value of a state in React

Question

While using multiple state variables in my App.jsx I wanted to set the value of one state equal to that of another state.

const [exchangeRatio, setExchangeRatio] = useState();
const [toCurValue, setToCurValue] = useState();

function foo()
{
   setToCurValue(exchangeRatio);
}

On console.log(exchangeRatio);

{exchangeRatio: undefined}
exchangeRatio: undefined
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

On further

console.log({exchangeRatio}.valueOf());
>>Undefined

I am new to React if there are ways to do the same feel free to write.

If the 2nd state has the value of the 1st state then why do you even need two states? — Ramesh Reddy
– Ramesh Reddy, Commented Jul 18, 2020 at 16:39
They can be different as well it's just one particular scenario where i want them same. — nutNCracker
– nutNCracker, Commented Jul 18, 2020 at 16:44

Abhishek Bhagate · Accepted Answer · 2020-07-18 16:43:52Z

2

const [exchangeRatio, setExchangeRatio] = useState();
const [toCurValue, setToCurValue] = useState();

The above statement denotes that you are declaring a state with values stored in exchangeRatio and toCurValue respectively and those states can be modified only using setExchangeRatio and setToCurValue methods respectively.

While you declare a state using useState(), you are expected to specify the initial value of the state inside the useState() as a parameter. For eg. if you want the initial value of exchangeRatio to be 10, then you must write it as -

const [exchangeRatio, setExchangeRatio] = useState(10);

Now, since you haven't provided an initial state value, you are getting the console logged output as undefined. Once, you properly initialize it with the proper value, you can directly use the state and the stored value will be returned to you.

So, suppose you want to set toCurValue's value to be equal to exchangeRatio's value (which has been initialised properly), then you can either do it while writing useState() or using the setToCurValue in following ways -

const [toCurValue, setToCurValue] = useState(exchangeRatio);

OR

setToCurValue(exchangeRatio);

answered Jul 18, 2020 at 16:43

Abhishek Bhagate

5,8063 gold badges18 silver badges33 bronze badges

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

1 Comment

nutNCracker Over a year ago

Thanks, it wasn't working because I had not initialized the state.

Collectives™ on Stack Overflow

How to extract value of a state in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related