State not being set corretly - javascript

I have a model Component in my ReactJs project, where I have a picture being, show and I want to pass the data of the picture, that a user clicked on, it can neither be raw data or a URL.
I have made a handle, that can both delete the picture (if pressed with the Ctrl key), or just open up the modal if clicked normally
showModalSpeceficHandler = (event, image) =>{
let index = this.state.images.indexOf(image)
if(event.ctrlKey){
let temp = this.state.images.slice(); //makes a shallow copy of the array
temp.splice(index, 1); //remove item
this.setState(prevState => ({ images: temp }));
}else{
console.log(image); // logs the data of the clicked image
this.setState(
state => ({imageModalData: image}),
() => this.showModalHandler()
);
console.log(this.state.imageModalData) //logs the data of the last added image
}
}
so the issue now is as mentioned in the comments, that the state is not set correctly. I was suspecting that the showModalHandler would change the state but
it simply sets the state, if it should be shown or not:
showModalHandler = () =>{
this.setState({showModal: !this.state.showModal})
}
What is happening, or overwriting the state, since it is not being set correctly

setState is an asynchronous operation.
When your setState call needs to refer to the old state you should use the alternative setState signature where you pass a function as first argument:
setState((state) => ({ showModal: !state.showModal }));
See https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
This is not technically a callback. The callback argument is the second setState parameter which is rarely used (so, more or less you should never use it).
See https://reactjs.org/docs/react-component.html#setstate

try to bind your showModalHandler function to this in your constructor like this :
constructor(props){
super(props)
/* your state*/
this.showModalHandler = this.showModalHandler.bind(this)
}

Related

React state updating but rendering late

I've tried almost every solution similar to my problem, yet none is working. I have a simple state and changing the value of this state in a function as like below, handleOnClick is calling in a button's onClick event. I'm also using Router(if it's change something);
import { useState} from "react"
import { BrowserRouter as Router, Route, Link, useHistory} from "react-router-dom";
const Buton = () => {
let x = "";
const [lowerState, setLower] = useState("")
const history = useHistory();
const handleOnClick = () => {
x = document.getElementById("my_input").value.toLowerCase();
setLower(x)
console.log(x) //this prints the current value
console.log(lowerState) //this DOES NOT prints the current value, but
// when I put another text into the input and click
// to button, it prints the first value I put here
history.push('/test', {params : lowerState})
};
.
.
.
return (...)
}
export default Buton
Now x is a value that returns from an input HTML element. When I set this value as a state and console log, it doesn't print the value first, when I put something in input again, then it prints the first value. So it's like it's coming 1 step behind.
I've used useEffect() , I did put a second parameter to setLower as console.log(lowerState) and other things on the internet that people suggested, but none is working. Every time, the state is coming 1 step behind. How can I make this state changes immediately?
If you want to use the value of an input in a user event function, the best way (and least buggy) is to bind your input value to local state and then just reference that state in your callback function.
Please try to avoid imperatively pulling values from the DOM using getElementById etc. Here's what I mean:
const [value, setValue] = useState('');
// This will keep everything updated until you need to use it
handleChange(event) {
setValue(event.target.value);
}
// Then just grab whatever is in local state
handleClick() {
history.push('/test', {params : value});
}
return (
<input value={value} onChange={handleChange} />
// Your button is here too
)
This is because when you call setLower(x) it is not an async call. So it doesn't wait. That's why you get the 1 step before value in your state right after setting the value.
Official doc - https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
When you call setLower(x), it doesn't immediately update the lowerState. The new value will be available the next time it renders. Because of that the console.log(x) "works" (since it uses the new value that you gain as a parameter) but console.log(lowerState) uses the old value that hasn't updated to the state yet at that point.
If you want history.push('/test', {params : lowerState}) to work, then you need to use the x there instead of lowerState. Or call it within a useEffect with the lowerState and having lowerState as a dependency parameter to the hook.
This is expected behaviour since React is updating state in a batch
Which mean that the state only gets an update after an eventHandler/function is finished
If you want to do some condition, wrap your logic inside a useEffect
useEffect(() => {
if (lowerState === "your-condition-value") {
history.push("/test", { params: lowerState });
}
}, [lowerState]);
Or in your case, just use the variable directly:
const handleOnClick = () => {
x = document.getElementById("my_input").value.toLowerCase();
history.push("/test", { params: x });
};
You should not worry about that since your app still working as expected
So i would like to suggest that use useRef if need for reference only object which may not causing rerendering. also using let x= "" is not correct, you should write code immutable way
const Buton = () => {
const lowerCaseRef = useRef("")
const history = useHistory();
const handleOnClick = () => {
lowerCaseRef.current =
document.querySelector("#my_input").value.toLowerCase();
console.log(lowerCaseRef.current) //this DOES NOT prints the current value, but
// when I put another text into the input and click
// to button, it prints the first value I put here
history.push('/test', {params : lowerCaseRef.current})
};
return (...)
}

why it is not showing update value on button click from state?

could you please tell me how to get updated value from state.here is my code
https://codesandbox.io/s/cool-ives-0t3yk
my initial state
const initialState = {
userDetail: {}
};
I enter 10 digit number on input field and press enter and update the user detail like this
const onSubmit = async values => {
if (values.mobile.length === 10) {
setUserDetail({ msdin: values.mobile });
console.log(userDetail);
}
};
setUserDetail({ msdin: values.mobile }); here I am updating my userdetail .
and try to console the update value like this
console.log(userDetail); .it is showing currently undefined.but expected output is {msdin:'9999999999'} (or whatever it is type in input field)
The problem is that you are using hooks and it's not synchronised, it's async. Therefore, accessing the detail immediately after setting the value will not be possible. If you want to access the data there, you will have to use values.mobile
The state will keep the last value until the next render is called.
You can see this information on react-hooks document
During subsequent re-renders, the first value returned by useState will always be the most recent state after applying updates.
So, the code should look like:
const onSubmit = async values => {
if (values.mobile.length === 10) {
const newUserDetailState = { msdin: values.mobile }
setUserDetail(newUserDetailState);
// do your stuffs with the newUserDetailState instead of userDetail
console.log(newUserDetailState);
}
};
The state setter setUserDetail is async, that means that the new state value won't be available immediately.
To see if the state update use useEffect like this :
useEffect(() => {
console.log('useEffect -> UserDetail : ', userDetail);
}, [userDetail]);

react-native update object using setState

Is it possible to update object using setState? I tried this code:
import moment from 'moment';
constructor() {
super();
this.state = {
pressedDate:{
},
}
}
updateState = (day) => {
let updateDay = moment(day.dateString).format(_format);
//When I console.log updateDay, I get this '2019-06-30'
console.log(updateDay,'updateDay')
//I want to update pressedDate with updateDay which is '2019-06-30'
this.setState({
pressedDate:{
updateDay : {dots: [vacation, massage, workout], selected: true}
}
})
}
I am trying to update my object with updateDay but nothing happens when I run this code.
You've said "nothing happens," but that code clearly replaces this.state.pressedDate with a new object with just the updateDay property.
If you meant to add/update updateDay without completely replacing pressedDate (that is, if it has other properties), you'd do that by making a copy and then updating the copy. The idiomatic way to do that uses property spread:
this.setState(({pressedDate}) => ({
pressedDate: {
...pressedDate,
updateDay : {dots: [vacation, massage, workout], selected: true}
}
}));
Two key things to note there:
It's using the callback version of setState. Because state updates are asynchronous, you must use the callback version whenever setting state (an updated pressedDate) based on existing state (the rest of pressedDate other than updateDay).
...pressedDate spreads out the properties of the current version into the new object being created. Then we add updateDay, which will overwrite any previous one.

Looking for assistance in getting proper results from .filter()

I am trying to filter an array with a string that is input by user. The results are not updating properly with the first key input, then if the box is cleared or characters removed/changed, results that may now pass the filter are not being displayed.
The goal is to have all results displayed on initial page render, then properly updated with each keystroke.
Apologies; I'm just learning to code. Thanks for all assistance.
searchCompUsers = () => {
const newState = {}
const filteredEmps = this.props.employees.filter(
user => user.name.includes(this.state.searchName)
)
console.log(filteredEmps)
`` newState.filterEmps = filteredEmps
this.setState(newState)
}
empSearch = evt => {
const stateToChange = {};
stateToChange[evt.target.id] = evt.target.value;
this.setState(stateToChange);
this.searchCompUsers()
};
These lines are being run in sequence:
this.setState(stateToChange);
this.searchCompUsers();
...
const filteredEmps = this.props.employees.filter(
user => user.name.includes(this.state.searchName)
)
...
this.setState(newState);
I am assuming in your example, evt.target.id is searchName.
Two things you're doing here which you shouldn't do:
Running two setStates in sequence. This isn't necessarily a problem, but there's generally no reason for it and it could mean your code is structured poorly.
Referencing the state immediately after setState. setState is run asynchronously, so you can't guarantee the state will be updated by the time you reach your filter.
The weird results you're getting are probably stemming from (2).
Something like this would work better, assuming the rest of your code is fine:
empSearch = evt => {
const key = evt.target.id;
const value = evt.target.value;
if (key === "searchName") {
const filteredEmps = this.props.employees.filter(
user => user.name.includes(value);
);
this.setState({
filterEmps: filteredEmps
});
}
};
This way, you're only calling setState once per event, and you're not relying on the results of an earlier setState.
If you need to keep searchName in the state for some reason (such as using a controlled component), then you can simply add it to the same setState.
this.setState({
filterEmps: filteredEmps,
searchName: value
});
The only places you can assume the state is up-to-date is in the render() function, and in certain React lifecycle functions. You can also provide a callback to setState if necessary, though this should be relatively rare: this.setState({ ...someState }, () => { ...someCodeToRun() });

React setState call not updating state

I have a React setState call that is choosing to misbehave, and I can't figure out what's going on. I think I've got it narrowed down a fair bit - this is the method in question:
setShowDeleteEventModal = (value) => {
console.log('dude', value); //logs true
this.setState(() => ({ showDeleteEventModal: value }), () => {
console.log('hey', this.state); //logs state showing 'showDeleteEventModal: false'
});
};
What I've done so far:
Checked to see if it's async - it isn't, based on the problem showing up in the callback function, though I also used a setTimeout to check it;
Made sure I have state properly declared;
Checked spelling on my variables, including using Find to make sure they all show up under the same spelling;
Checked the type of value in case it was a String - it's a boolean;
Rewrote the entire implementation.
Desired behavior: showDeleteEventModal shows up true after the setState call.
Actual behavior: it doesn't.
I call this method from a button onClick in a sub-component, but since 'dude' and 'true' show up to the screen I know it's getting into here. showDeleteEventModal is a switch that controls whether a modal is displayed or not.
The part that baffles me most about it is that I have an extremely similar setup in the same file which works flawlessly. Here is the other method:
setShowOnMap = (value) => {
this.setState(() => ({ showOnMap: value }));
};
And here is the button call from the subcomponent with the prop being passed in:
<div className = "button background-red width15"
onClick = {props.switchModals}
>
Remove this event
</div>
switchModals = {
() => {
this.setShowDeleteEventModal(true);
this.closeModal()
}
}
The whole file is a little long for posting here, but hopefully this will be enough and I'm just missing something silly.
setShowDeleteEventModal = (value) => {
console.log('dude', value); //logs true
this.setState({ showDeleteEventModal: value }, () => {
console.log('hey', this.state); //logs state showing 'showDeleteEventModal: false'
});
};
Try to remove the arrow function call, for your first parameter just put the state object instead, just like above

Categories