GoTeamEpsilon / angular-to-react-redux

Angular to React/Redux, a Guide for Angular v1 Experts Looking to Learn React/Redux
MIT License
107 stars 12 forks source link

filters #7

Closed ShaneChesnutt closed 7 years ago

ShaneChesnutt commented 7 years ago

Document in Readme

MatthewVita commented 7 years ago

I would like to demonstrate the max "filter" for this. Given a list of numbers, filter out the largest of them.

In HTML:

 <p>{{ myValues | max }}</p>

In JS:

  $scope.maxValue = $filter('max')($scope.myValues);
MatthewVita commented 7 years ago

Coming along...

// TODO: import as a module
const update = React.addons.update;

// TODO: import as a module
function getLargestNumberInArray(arr) {
  return arr.reduce(function(x,y){
    return (x > y) ? x : y;
  });
}

class LargestListMemberIncrementer extends React.Component {
  constructor(props) {
  super(props);
    this.state = {
      listOfNumbers: [1, 55, 3, -3, 1]
    };

    this.incrementLargestListMember = this.incrementLargestListMember.bind(this);
  }

  incrementLargestListMember() {
    const newState = update(this.state.listOfNumbers, {$push: [getLargestNumberInArray(this.state.listOfNumbers) + 1]});

    this.setState({
      listOfNumbers: newState
    });
  }

  render () {
    return (
      <div>
        <h1 onClick={this.incrementLargestListMember}>{getLargestNumberInArray(this.state.listOfNumbers)}</h1>
       </div>
    );
  }
}