ReactJS: why is pushing value into this.state array causing type error?

Question

I tried to push a value into a state array but I get an issue TypeError: Cannot read property 'state' of undefined at this.state.rows.push(a);

Know why? I am trying to push a new value into the array after i click a button.

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: '',
      rows: ['hello',<p>gfdfg</p>,'mello']
    }

  }

  handle(e){
    e.preventDefault();
    var a = "h";
    this.state.rows.push(a);
    alert("hello");
  }

  render() {
    return (
      <div className="App">
        Button<br/>
        <input type="submit" id="black" onClick={this.handle}/><br/>
        <p>{this.state.rows}</p>
      </div>
    );
  }
}

export default App;

mutating state is definitely not a good idea instead of pushing how about using this.setState({ }) instead of this.state.rows.push(a); — Aaqib
– Aaqib, Commented Jan 21, 2018 at 17:08

Nir Ben-Yair · Accepted Answer · 2018-01-21 17:17:37Z

3

There are couple of things that are wrong here:

you should NEVER change the state directly:

This is a big No No:

this.state.rows.push(a);

instead you should do something like this: this.setState({ rows : [...this.state.rows, a] })

or without ES6:

const newArray = this.state.rows.slice();
newArray.push(a);
this.setState({ rows: newArray })

You should always replace the state with a new one.

this in a react component is not what you think it is, in order to make it work you can do one of two things:

a. change your method to an arrow function:

handle = (e) => {
    e.preventDefault();
    var a = "h";
    this.state.rows.push(a);
    alert("hello");
  }

b. bind this to the method:

constructor() {
    super();
    this.state = {
      name: '',
      rows: ['hello',<p>gfdfg</p>,'mello']
    }
    
    this.handle = this.handle.bind(this);

  }

edited Jan 21, 2018 at 17:17

answered Jan 21, 2018 at 17:10

Nir Ben-Yair

1,6063 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raghudevan Shankar · Accepted Answer · 2018-01-21 17:09:28Z

1

the method handle does not have access to the context of the class i.e this; consider writing it as a fat arrow function

// class definition 
handle = () => {
  e.preventDefault();
  var a = "h";
  this.state.rows.push(a);
  alert("hello");
}

render() {
  // render logic
}

Having said this, mutating the state is not a good idea, consider using setState if you want your component to re-render as a result of state change

handle = () => {
  e.preventDefault();
  let { rows } = this.state;
  var a = "h";
  rows.push(a);
  this.setState({
    rows,
  });
}

answered Jan 21, 2018 at 17:09

Raghudevan Shankar

1,0939 silver badges18 bronze badges

Comments

Himanshu Dwivedi · Accepted Answer · 2018-01-21 17:10:36Z

1

You are doing wrong, you have to use setState() method to push the value in the array:

handle = (e) => {
    e.preventDefault();
    var a = "h";
    let tempRows = [...this.state.rows];
    tempRows.push(a)
    this.setState({rows:tempRows})
    alert("hello");
  }

answered Jan 21, 2018 at 17:10

Himanshu Dwivedi

8,1844 gold badges33 silver badges57 bronze badges

Comments

Vincas Stonys · Accepted Answer · 2018-01-21 17:15:27Z

You have two problems.

Event handlers require 'this' to be bound: https://reactjs.org/docs/handling-events.html So following this, you must either write: this.handle = this.handle.bind(this) in your contructor, or change handler to arrow function, if your build process supports transpilation of class fields.
React component will only update if component props change, or component state changes. Which is done by comparing references. In your case, when you push to the array, you are mutating the state, so the new reference is never created, and component does not re-render. If you want to verify that, just put console.log(this.state.rows) below this.state.rows.push(a) and you'll see that the array has received the new value, but component does not represent it. You need to use this.setState to create a new reference for your state, like so: this.setState({ rows: [...this.state.rows, a] })

Hisham Mubarak · Accepted Answer · 2018-01-21 18:16:37Z

0

Another way of returning a new array from the current array with additional elements and then pushing to state is to use the concat method.

Example :

this.setState({ users: this.state.users.concat(<Additonal Items Here>)}

answered Jan 21, 2018 at 18:16

Hisham Mubarak

1,6093 gold badges24 silver badges28 bronze badges

Collectives™ on Stack Overflow

ReactJS: why is pushing value into this.state array causing type error?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related