3

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'));

killer boyz
  • 65
  • 1
  • 8

5 Answers5

6

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?

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
3

use 'concat':

this.setState({Students: this.state.Students.concat(student)})
Amy
  • 56
  • 1
2

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.

Gerard Banasig
  • 1,703
  • 13
  • 20
1

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.

T4rk1n
  • 1,380
  • 12
  • 15
  • could you explain more to be about that because i'm new and i didn't understand much the way it work, thank you. – killer boyz Jul 14 '17 at 03:09
  • It means that the push function will work, but will just return the number of items inside the array, and not the actual results. – Gerard Banasig Jul 14 '17 at 03:31
0

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)
})
Piotr Labunski
  • 1,638
  • 4
  • 19
  • 26
Vikas
  • 1
  • 2