aneta_bielska [:blog]

ReactJS: simple filtering
#react-js

Filtering is a core feature of my app. Example below is a first step to create it. In visual part it has a select with options and a submit button. It connects to a temporary tiny api with a few example objects. So it is possible to check if it works.

// /api/pets.json

// a tiny example object

[
  ...
  {
    "id":11,
    "name":"Nasus",
    "pet_type":"dog",
    "date_of_birth":"2010-01-01",
    "gender":"male"
  },
  ...
]

At this point it is possible to filter by pet_type.

Most of the work was done using javascript. When writing ReactJS apps you got to think about components hierarchy. It could be a good idea to add a border for div elements - it is easier to see that hierachy.

You can see below a full example of my simple filtering. Yeah, quite a lot of code:

// app.jsx

var PetsList = React.createClass({
  render: function() {
    var  filteredPets  = this.props.data.map(function(pet) {
      return (
        <div className='pet' key={pet.id}>
          <p className='pet-name'><b>{pet.name}</b></p>
          <p>gender: {pet.gender}</p>
          <p>type: {pet.pet_type}</p>
          <p>age: {getAge(pet.date_of_birth)}</p>
        </div>
      );
    });

    return (
      <div id='pets-list'>
        {filteredPets}
      </div>
    );
  }
});

var PetsFilter = React.createClass({
  getInitialState: function() {
    return {pet_type: 'all'};
  },

  handlePetTypeChange: function(e) {
    this.setState({pet_type: e.target.value});
  },

  handleSubmit: function(e) {
    e.preventDefault();
    var pet_type = this.state.pet_type;
    this.props.onPetsFilterSubmit({pet_type: pet_type});
  },

  render: function() {
    return (
      <div id='pets-filter'>
        <form className="pets-filter-form" onSubmit={this.handleSubmit}>
          <select onChange={this.handlePetTypeChange}>
            <option value="all">all</option>
            <option value="cat">cats</option>
            <option value="dog">dogs</option>
            <option value="other">other</option>
          </select>
          <input type="submit" value="Filter" />
        </form>
      </div>
    );
  }
});

var PetsFilterBox = React.createClass({
  getInitialState: function() {
    return {data: []};
  },

  handlePetsFilterSubmit: function(pet_type) {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      type: 'GET',
      data: pet_type,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },

  render: function() {
    return (
      <div>
        <p>Filter pets</p>
        <PetsFilter onPetsFilterSubmit={this.handlePetsFilterSubmit}/>
        <PetsList data={this.state.data} />
      </div>
    );
  }
});


ReactDOM.render(
  <PetsFilterBox url="/api/pets.json" />,
  document.getElementById('app')
);

For more details visit my project on github or check live app on heroku.

You may also enjoy:


#servers (1) #hosting (1) #sinatra (2) #assets (1) #sprockets (1) #react-js (1) #data-mapper (1) #ROM (1) #sequel (1) #ORM (1) #pg (1) #sqlite3 (1) #postgresql (1) #ruby (4) #ubuntu (1) #heroku (1) #git (1) #css (3) #cors (1) #same-origin-policy (1) #rake (1) #web-scraping (1) #ruby-on-rails (1) #brug (1) #elixir (1) #benchmark (1)