Object literal values and React.js

Question

Lets say there are 2 components Main and Card, Card is child of Main in React.js. Card will pass in an string value to Main. Thus state in Main for the Card would update.

var Card= React.createClass({
...
this.props.updateName(loginVal.value); //pass in a 'string' to updateName()
...
});

var Main = React.createClass({
    getInitialState: function() {
        return {
            names: []
        };
    },
    updateName: function (loginVal) {
        this.setState({ 
            names: this.state.names.concat(loginVal) // I don't understand why using 'concat' works but not 'push'.
        });
    },
    render: function(){
        var cardArr = this.state.names.map(function(item){
            return ( <Card login={item} /> );
        });
        return (
            <div>
                <Form updateName={this.updateName} />
                {cardArr}
            </div>
        );
    }
});

My question is why this.state.names.concat(loginVal) works when this.state.names is an empty array and loginVal is a string. [].concat('string') just don't make sense to me.

Oden · Accepted Answer · 2015-06-26 06:08:36Z

1

push adds the provided element(s) and returns the new length of the array, so this.state.names would be a number.

concat adds the provided element(s) to a new array and returns it, so this.state.names would be an array with the new name added.

answered Jun 26, 2015 at 6:08

Oden

6286 silver badges15 bronze badges

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

6 Comments

user2734550 Over a year ago

I still don't understand. Would you explain it in a different way? I understand push updates original array and concat returns a new array. but I don't understand is why [].concat('string') here? I know my logic must be wrong somewhere.

dan-lee Over a year ago

I think it's very understandable what he wrote. You should write: var names = this.state.names; names.push(loginVal); this.setState({ names: names });

Oden Over a year ago

@user2734550 Whoever wrote the code probably just did it to be shorter. Both this.state.names.push(loginVal); this.setState({names: this.state.names}); and this.setState({names: this.state.names.concat(loginVal)}); do the same thing, one is just shorter than the other.

user2734550 Over a year ago

A big fundamental mistake... forgot push returns length. Thanks everyone.

Alexandre Kirszenberg Over a year ago

this.state.names.push(loginVal) has the downside of mutating the array. In React, using mutative methods like push is discouraged as it makes it impossible to compare two snapshots of your component's props and state. See shouldComponentUpdate for example.

|

marcel · Accepted Answer · 2015-06-26 07:10:35Z

1

[].concat(["string", "other string") will push each value to an new empty array. You can also pass a simple string instead of an array because the method was overwritten to make it more flexible.

push("string") do not work because it will return the new length of the array. But it will change the array instead of creating a new one.

you could use this:

this.state.names.push(value);
this.setState({
    names: this.state.names
});

edited Jun 26, 2015 at 7:10

answered Jun 26, 2015 at 6:54

marcel

3,1471 gold badge20 silver badges29 bronze badges

3 Comments

user2734550 Over a year ago

Are you saying if it is NOT empty array, it would return new array. Otherwise, it doesn't?

user2734550 Over a year ago

Now that make sense. I wonder when they overwritten that, didn't know array can concat string directly

marcel Over a year ago

thats the power of JavaScript/functional programming. ;-)

Collectives™ on Stack Overflow

Object literal values and React.js

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related