How do I clear states or empty array on click in react 0.14 ES6?

Question

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: []
   })
 }

Hey Sorry you are right @Antonio this.state.myarray=[] fixed my problem. — Harsha Kakumanu, Feb 17 '16 at 20:18
Push data seems weird... I would write this.state.myArray.push(newVar) — Antonio, Feb 17 '16 at 20:19
this.state.myArray.push(newVar) this way of pushing didnt work for me. I tried .concat too but didnt work — Harsha Kakumanu, Feb 17 '16 at 20:20
Are you getting an error? It's not clear what's broken from your question. What does your `render` function look like? — Carl Vitullo, Feb 17 '16 at 20:27
Sorry for the trouble given I found out the closeModal didnt get called at all on componentWillUnmount. So i Changed it back to my old code and fixed it this.setState({myArray: []}); will work. — Harsha Kakumanu, Feb 17 '16 at 21:47
`state.myArray.push(newVar)` will not behave as expected either. `Array.prototype.push` returns 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. — Mulan, Feb 18 '16 at 08:12

score 20 · Accepted Answer · edited Feb 17 '21 at 08:24

20

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

edited Feb 17 '21 at 08:24

Community

1
1

answered Feb 17 '16 at 20:19

Harsha Kakumanu

703
1
7
17

2

_Never_ assign to `this.state` outside of the constructor. That might fix your immediate problem but it _will_ cause bugs. – Carl Vitullo Feb 17 '16 at 20:25
1

Yes, use `this.setState({ myArray: [] });` instead. – Gaston Sanchez Feb 17 '16 at 21:10

CanCoder · Answer 2 · 2021-03-26T00:15:50.137

5

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([])

edited Mar 26 '21 at 00:15

answered Jun 06 '19 at 00:13

CanCoder

1,073
14
20

score 1 · Answer 3 · edited May 23 '17 at 12:15

1

A couple of solutions with explanations to this (albeit in ES5) can be found here:

https://stackoverflow.com/a/29994490/4572987

edited May 23 '17 at 12:15

Community

1
1

answered Feb 17 '16 at 19:53

dskoda1

109
10

So the pushData method correctly adds newVar into the state and causes a re-render correct? why not make those methods uniform and have closeModal look like: this.setState((state) => { myArray: [] }); – dskoda1 Feb 17 '16 at 20:14
If that doesn't work, I suspect it has something to do with the code changing the actual reference React has to the myArray variable, and as a result not affecting it at all.. – dskoda1 Feb 17 '16 at 20:17

score 1 · Answer 4 · answered Dec 05 '19 at 12:01

1

this.state.array.splice();

This will Delete or truncate whole array

answered Dec 05 '19 at 12:01

Tr4cEr

47
4

This will not update the state, also splice needs two params: 1. start The zero-based location in the array from which to start removing 2. deleteCount The number of elements to remove – Safeer Jun 19 '22 at 13:07

jfk · Answer 5 · 2020-12-27T09:55:48.603

1

This is what worked for me.
Class based component

this.setState({myArray: []});

With React Hook,

const [myArray, setMayArray] = React.useState([]);
setMayArray([]);

edited Dec 27 '20 at 09:55

answered Dec 22 '20 at 14:15

jfk

4,335
34
27

How do I clear states or empty array on click in react 0.14 ES6?

5 Answers5