How to get array values in react js

Question

I want to get the updated values of an array. When I do a console.log I only get the length of the array and the new values aren't shown in the view. What is wrong here? js fiddle

react js

getInitialState: function() {
  return {
    owner: "Martin Schwatz",
    friends:  ["Pietro", "Mike", "Shawn", "Bilbo"],
  }
},
updateFriends: function(friend) {
  var a = this.state.friends.push(friend);
  console.log(a);
  this.setState({
    friends: a,
  });
},

@DavinTryon, but how would a react developer get the new values into the array? — vuvu
– vuvu, Commented Nov 17, 2016 at 12:02

The Reason · Accepted Answer · 2016-11-17 12:10:13Z

2

Take a look at this one

var Hello = React.createClass({
  getInitialState: function() {
    return {
      owner: "Martin Schwatz",
      friends:  ["Pietro", "Mike", "Shawn", "Bilbo"],
    }
  },
  updateFriends: function(friend) {
    var newFriends = this.state.friends.concat(friend)
    this.setState({
      friends: newFriends,
    });
  },
  click: function(){
    this.updateFriends('VuVu')
  },
  render: function(){
    var listOfFriends = this.state.friends.map(function(item,i){
        return <li key={i}>{item}</li>
    }.bind(this))
    return <div>
        <button onClick={this.click}>Add VuVu</button>
        <hr/>
      {listOfFriends}
    </div>
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

It should work for you <fiddle>

answered Nov 17, 2016 at 12:10

The Reason

8,0135 gold badges27 silver badges43 bronze badges

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

Comments

Davin Tryon · Accepted Answer · 2016-11-17 12:07:17Z

1

push returns the new length of the mutated array. So, in the current code, a won't be the array itself.

Try this instead:

updateFriends: function(friend) {
  const newFriends = [ ...this.state.friends, friend ];
  this.setState({
    friends: newFriends,
  });
},

answered Nov 17, 2016 at 12:07

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Collectives™ on Stack Overflow

How to get array values in react js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related