score:4
react state updates are asynchronous, i.e. queued up for the next render, so the log is displaying the state value from the current render cycle. you can use an effect to log the value when it updates. this way you log the same state.value
as is being rendered, in the same render cycle.
export default function app() {
const [state, setstate] = usestate({
value: ""
});
useeffect(() => {
console.log(state.value);
}, [state.value]);
let handlechange = input => {
setstate(prevvalue => {
return { value: input };
});
};
return (
<div classname="app">
<h1>{state.value}</h1>
<child handlechange={handlechange} value={state.value} />
</div>
);
}
score:0
maybe it is helpful for others i found this way...
i want all updated projects in my state as soon as i added them so that i use use effect hook like this.
useeffect(() => {
[temp_variable] = projects //projects get from useselector
let newformvalues = {...data}; //data from usestate
newformvalues.projects = pro; //update my data object
setdata(newformvalues); //set data using usestate
},[projects])
score:1
two solution for you: - use input value in the handlechange function
let handlechange = input => {
setstate(prevvalue => {
return { value: input };
});
console.log(state.value);
};
use a useeffect on the state
useeffect(()=>{ console.log(state.value) },[state])
Source: stackoverflow.com
Related Query
- How to access the latest state value in the functional component in React
- How to initialize the react functional component state from props
- How to test the state of a functional component in React with Jest (No Enzyme)
- Why callbacks in react functional component is not reading the updated state value
- Is there any way to define the datatype of value in state of hooks in functional component of react JS?
- How to set defaultChecked getting value from state React Functional Component Checkbox (React - Hooks)
- How can I access a functional components state outside the component? - React
- How to prevent Re-render in react when the state is changed using Functional Component
- How to access state in a React functional component from a setTimeout or setInterval callback?
- How to update the state in functional component using React Hooks
- How to access the state of one component or the constants of one component in another component (not parent child) - React
- how can I set the reducer's return value to state object in component in react js
- onChange is not working in react functional component while changing the value through state update
- How can custom Hooks in React have different state names then the state name used by the functional component from which it was called?
- How to set the state of a react functional component using jest
- Retrieving a state value using the string name of the variable in React functional component
- How to set state in parent from one child component and access the state in another child component using react and typescript?
- In React components implemented with hooks, how can the latest component state values be read from within setInterval?
- How do I use react hooks to tidy up a functional component when it unmounts (using values from state in the tidy up)
- How do I access the Context and Component state from within a DOM callback in a function React component?
- How to access my redux state outside of the functional component or class component?
- How to access a value of the array present in useEffect, in the return function of the functional component in react.js?
- How can I change the state of one React component based on the value of its sibling?
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- React router v4 - How do you access the state that is passed via Redirect?
- How to access state when component unmount with React Hooks?
- Does react re-render the component if it receives the same value in state
- How to update the state of a sibling component from another sibling or imported component in REACT
- How to TEST async calls made in componentDidMount that set the state of React Component
- How to get the changed state after an async action, using React functional hooks
More Query from same tag
- How to handle errors in my form fields with a single function in ReactJS?
- Why the original source code is showing in the source using webpack? And how to disable it?
- Unhandled Rejection (TypeError): setToken is not a function
- Why isn't my react component's css updating dynamically?
- Changing style of a button on click
- react-chartjs-2 Line Chart not updating with State
- Can't fill my state in componentDidMound function
- How to know when there is a selected text in a text area instead of polling?
- React progress element has a bug on IE10
- React js component not listen to Jquery plugin
- Remove table row using Hooks
- ReactJS - Hide part of page under authorization
- React JS: Getting [object object] When Concatenating Object Element With String
- How to mock API calls made within a React component being tested with Jest
- Can't update react-dom 15.6.1 to 16.x.x
- Is it possible to pass different props from two different files in React?
- Multi step form ReactJs with Context API
- How to import multiple components from one general folder?
- React Bootstrap OverlayTrigger change popperConfig offset px to em?
- How can I export state to parent functional component in React?
- Creating a new room (including inputs and button) and only template shows without the values inside (rcc)
- Cannot read property push of undefined for react use history
- Getting error {"errors":[{"message":"Must provide query string."}]}
- toggling a class depending on url in React
- React stale state useCallback
- fill up a bar with incremental value and timeout
- How to stringify an Object which includes objects of array?
- Redux vs plain React
- How to show modal popup after submitting form using reactjs?
- Outputting unescaped JSON+LD on GatsbyJS React site