CODEWITHSUNDEEP
reactjsreact-hooksuse-statereact-state
nutNCracker
nutNCracker

Reputation: 191

How to extract value of a state in React

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.

Upvotes: 1

Views: 1930

Answers (1)

Abhishek Bhagate
Abhishek Bhagate

Reputation: 5786

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

Upvotes: 2

Related Questions