Why can't I push values in my state array in react.js?

Question

I can add 1 item to the array it logs ["50"] in the console. But when I try to add a second value I get this error "currentScores.push is not a function". Is this the wrong way of doing it?

 class Scores extends Component {

      constructor() {
        super();
        this.addScore = this.addScore.bind(this);
        this.handleScoreChange = this.handleScoreChange.bind(this);
        this.state = {
          scores: [],
          scoreInput: '',
        };
      }

      addScore() {
        const currentScores = this.state.scores;
        const newScores = currentScores.push(this.state.scoreInput);
        this.setState({ scores: newScores });
        console.log(this.state.scores);
      }

      handleScoreChange(e) {
        this.setState({ scoreInput: e.target.value });
      }

      render() {
        const scores = this.state.scores;
        return (
                <input name="score" type="text" placeholder="Score" onChange={this.handleScoreChange}/>
                <button onClick={this.addScore(this.state.scoreInput)}>add</button>
        );
      }
    }

    export default Scores;

Shubham Khatri · Accepted Answer · 2016-12-29 09:15:23Z

Two things, when you make use of push it doesn't return a new array. Make use of concat and bind the value to the addUser function.

Also wrap your elements inside a single div and write your console.log() statement to output the state value in the callback function of setState since it takes some time to mutate

 class Scores extends React.Component {

      constructor() {
        super();
        this.addScore = this.addScore.bind(this);
        this.handleScoreChange = this.handleScoreChange.bind(this);
        this.state = {
          scores: [],
          scoreInput: '',
        };
      }

      addScore() {
        const currentScores = this.state.scores;
        const newScores = currentScores.concat(this.state.scoreInput);
        this.setState({ scores: newScores }, function(){
          console.log(this.state.scores);
        });
        
      }

      handleScoreChange(e) {
        this.setState({ scoreInput: e.target.value });
      }

      render() {
        const scores = this.state.scores;
        return (
                <div>
                <input name="score" type="text" placeholder="Score" onChange={this.handleScoreChange}/>
                <button onClick={this.addScore.bind(this, this.state.scoreInput)}>add</button></div>
        );
      }
    }

    ReactDOM.render(<Scores/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Mark Williams · Accepted Answer · 2016-12-29 09:05:35Z

2

The problem is that push doesn't return a new array, bit the length of the amended array. So you're actually assigning state.stores to a number, which of course doesn't support push.

I can see you're trying to avoid mutating state by attempting to clone the scores array, but push will mutate it, not return a new instance. It might be better to do something like:

const newScores = [...this.state.scores, this.state.scoreInput];
this.setState({ scores: newScores });

edited Dec 29, 2016 at 9:05

answered Dec 29, 2016 at 9:01

Mark Williams

2,3081 gold badge14 silver badges15 bronze badges

1 Comment

Jim Peeters Over a year ago

How can I return an array in this situation?

Shubham Khatri · Accepted Answer · 2016-12-29 09:14:27Z

1

Push returns the new length property of the object upon which the method was called.

You set the state of scores to the new length each time.

addScore() {
        console.log(this.state.scores);
        this.setState(state=> ({
            scores: [...state.scores, state.scoreInput]
            })
         );
      }

edited Dec 29, 2016 at 9:14

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

answered Dec 29, 2016 at 9:02

Martin Dawson

7,6579 gold badges59 silver badges97 bronze badges

Comments

ToJa92 · Accepted Answer · 2016-12-29 09:03:25Z

0

The return value of currentScores.push() is the new number of elements in the array. You then save this in your state which means that scores in your state becomes a number instead of an array.

You likely want to construct a new array instead since you are working with constant variables:

const currentScores = this.state.scores;
const newScores = currentScores.concat(this.state.scoreInput);
this.setState({ scores: newScores });

answered Dec 29, 2016 at 9:03

ToJa92

4414 silver badges8 bronze badges

Comments

Anenth · Accepted Answer · 2016-12-29 09:06:50Z

0

The problem is over here <button onClick={this.addScore(this.state.scoreInput)}> add</button>);

When you run this.addScore(this.state.scoreInput) inside the onclick, javascript runtime will call addScore function. Thats why you are getting 50~logs

Try <button onClick={ function(){this.addScore(this.state.scoreInput)}}> add</button>);

answered Dec 29, 2016 at 9:06

Anenth

7028 silver badges24 bronze badges

Collectives™ on Stack Overflow

Why can't I push values in my state array in react.js?

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related