How to search in the table between two age

Question

I have a table that display employees information. I want to add a search to display all employees between spicfic number that i put in min textbox and max textbox. Here is my table code.

constructor() {
    super();
    this.state = {
      employees: []
    };
  }
  componentDidMount() {
    this.employeesTracker = Tracker.autorun(() => {
      const employees = Employees.find().fetch();
      this.setState({ employees });
    });
  }

  renderEmployeesListItems() {
    return this.state.employees.map(employee => {
      return (
        <tr key={employee._id}>
          <td>{employee.name}</td>
          <td>{employee.email}</td>
          <td>{employee.age}</td>
          <td>{employee.gender}</td>
          <td>{employee.city}</td>
        </tr>
      );
    });
  }

here where I render my app:

render() {
    return (
      <div>
          <input type="text" id="min" name="min"/>
          <input type="text" id="max" name="max"/>
          <button onClick={this.ageFilter.bind(this)}>filter</button>
        <table id="myTable">
          <tbody>
            {this.renderEmployeesListItems()}
          </tbody>
        </table>
      </div>
    );
  }

Answer 1

instead of || (OR) you need to use && (AND) operator

...

var age = parseInt(td.innerHTML)
if (age > filterMin && age < filterMax) {
  ...
} else {
  ...
}

Also don't why are you accessing data through document. . This is not the way to do document update in react.

Answer 2

You could have this filtered Data separately as a state variable, filteredEmployee or such. Then the filter function will be,

ageFilter = () => {
   const { employees, min, max } = this.state;
   const filteredEmployees = employees.filter(employee => min < employee.age && employee.age < max);
   this.setState({ filteredEmployees })
}

you'll need to add logic to clear the filter too, if you need that. use this filteredEmployees in renderEmployeesListItems function instead of employees