I am rendering an array in a modal. Once the modal closes I need to empty the array.The following code updates the array but not clear array on click of closeModal.
constructor(props,context) {
super(props,context);
this.state = {
myArray: []
};
}
pushData(newVar) {
this.setState((state) => {
myArray: state.myArray.push(newVar)
});
}
closeModal() {
this.setState({
myArray: []
})
}
I found the problem is my closeModal didn’t get called at all on closing modal. I am doing that to closeModal on componentWillUnmount function. I understood that the below code causes problem.
this.state.myArray=[] // class component
const[myArray, setMyArray]=useState([]) // functional component
I changed it back to
this.setState({myArray: []}); // class component
setMyArray([]); // functional component
this.state outside of the constructor. That might fix your immediate problem but it will cause bugs.
this.setState({ myArray: [] }); instead.You can as well use this to clear array without using setState:
this.state.your_array.length = 0;
This will work in any function.
Update Functional component:
setYourArray([])
A couple of solutions with explanations to this (albeit in ES5) can be found here:
this.state.array.splice();
This will Delete or truncate whole array
This is what worked for me.
Class based component
this.setState({myArray: []});
With React Hook,
const [myArray, setMayArray] = React.useState([]);
setMayArray([]);
state.myArray.push(newVar)will not behave as expected either.Array.prototype.pushreturns the length of the new array, not the array with the new value in it.setState(state => ({myArray: state.myArray.concat(newVar)}))is closer to what you're looking for.