How do I console log the value of initialized useState in react? - reactjs

Question

Initializing values
const initialValues = {
bag: 32,
donor: "",
};
const [values, setValues] = useState(initialValues);
console.log(values.bag)
I don't know more about hooks but when I console.log the value is showing infinite looping value. Am I doing something wrong?

Answer 1

As you are using the functional components, you could set your state or put console.log into the useEffect() hook. Also, you could call your own function in this functional component to do the same. I am writing out both the scenarios in the below code snippet.
import React,{useEffect,useState} from 'react';
export default function IntroToReact(){
const initialValues = {bag: 32,donor:""};
const [values, setValues] = useState(initialValues);
//Effect is called once during init
useEffect(()=>{
console.log(values.bag);
},[]);
//Effect is called everytime the values change
useEffect(()=>{
console.log(values.bag);
},[values]);
// Display the values
function onChangeValues(){
console.log(values.bag)
}
return (
<div>
{onChangeValues()}
</div>
);
}`
For further understanding, this concept you could refer to the official website of the react:- https://reactjs.org/docs/hooks-effect.html
I hope it will help you.
Thank you :)

Answer 2

Hooks does not work inside classes. It works with function based component. It should always be used at the top level of the React Function.
I have run your code it's working fine. But you need to keep in mind some points using hooks first what syntax and approach you are following. Like your code needed to run in function-based component. I am adding a small snippet which is running fine.
import React, {useState} from 'react';
function Home(){
const initialValues = {
bag: 90,
donor: "",
};
const [values, setValues] = useState(initialValues);
console.log(values.bag)
return(
<div>
<h1>Welcome To Home</h1>
</div>
);}export default Home;
Set the indentation properly and call this component into your main component(if it is App.js or App.jsx and index.js or index.jsx)
Follow this official documentation of react.js. I am showing something in this documentation which will help you to know more about hooks.
enter link description here