Uncaught TypeError: this.state.Students.push is not a function and this.state.Students.map is not a function

3
votes

What should i do?, i try many ways to solve this problem but still uncaught type error .push and .map is not function.Please help me solve this ,it will great honor for me.

var InsertArray = React.createClass({ getInitialState: function () { return { Students: [], Fname: '', Lname: '', Id: '', } },

render: function () {
    return (
        <div>
            Firstname:
            <input type="text" onChange={this.handleFN} value={this.state.value} />
            <br />
            Lastname :
            <input type="text" onChange={this.handleLN} value={this.state.value}/>
            <br />
            Student Id:
            <input type="number" onChange={this.handleId} value={this.state.value} />
            <hr />
            <button type="Submit" onClick={this.handleClick}>Submit</button>
            <button type="Submit" onClick={this.handleClickD}>Display</button>
            <br />
        </div>
        );
},

handleFN : function (value) {
    this.setState({
        Fname: value
    });
},

handleLn: function (value) {
    this.setState({
        Lname:value
    });
},

handleId: function (value) {
    this.setState({
        Id: value
    })
},

//this is where the data will be push into Student array by using push.

handleClick: function (e) {
    e.preventDefault();
    var student = {
        Fname: this.state.Fname,
        Lname: this.state.Lname,
        Id   : this.state.Id
    }
    this.setState({
        `Students: this.state.Students.push(student)`
    });
},

//And this handleClickD will be read all the data inside array and display.

handleClickD: function (e) {
    e.preventDefault();

        <div>
            <ul>`{this.state.Students.map(function (stud) {
                    return (<li key={stud.Id}>{stud.Fname}{stud.Lname}`
                </li>)
                }
                )}
            </ul>
        </div>
} });

ReactDOM.render(, document.getElementById('container'));

5
javascriptjqueryreactjsasp.net-mvc-4
Are you ever initializing the state? – bmartin
yea,i already initialized the state but still get caught error at map and push method. – killer boyz
I have 1 more problem map(). It doesn't display the data back after the user click display button .Please help me – killer boyz
I suggest creating a new question so you will get visibility on your question. – bmartin

5 Answers

2
votes

An explicit way of using push in the case would be like this

handleClick: function (e) {
    e.preventDefault();
    var student = {
        Fname: this.state.Fname,
        Lname: this.state.Lname,
        Id   : this.state.Id
    }

    this.state.Students.push(student)
    this.setState({
        Students: this.state.students
    });
},

But still, concat() is way better because its non verbose, and has fewer lines.

6
votes

Issue is, array.push will not return the final array, it will return the length of the array.

Check this snippet:

let a = [1,2,3,4,5,6];

let b = a.push(10);

console.log('b = ', b);  //b = 7 not [1,2,3,4,5,6,10]

To solve you issue use spread operator and put new value into array:

this.setState({
    Students: [...this.state.Students, student]
});

Check this for more details about spread operator: What do these three dots in React do?

3
votes

use 'concat':

this.setState({Students: this.state.Students.concat(student)})
1
votes

Array.push will return the new length of the array so after:

 this.setState({Students: this.state.Students.push(student)})

Students will be a number not an array.

0
votes

Array.push() and splice() are mutable method.

Why it's Effect react Set-state method Because of Immutability of the State.

This reason doesn't use a mutable method in Set-state. otherwise, you use the concat() and slice() Ex:-

this.setState({
    ...this.state,
    newServiceStrings: this.state.newServiceStrings.concat(newServiceName)
})