RedFrog
RedFrog

Reputation: 80

How to filter a search result in React with filter button?

How can I filter a search result using react and firebase?

I have this code working fine, each time I type a letter it will show my firebase data search result

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './App.css';
import firebase from './Firebase';


class App extends Component {
  constructor(props) {
    super(props);
    this.ref = firebase.firestore().collection('Products');
    this.unsubscribe = null;
    this.state = {
      filter: "",
      Products: []
    };
  }

  onCollectionUpdate = (querySnapshot) => {
    const Products = [];
    querySnapshot.forEach((doc) => {
      const { title, status } = doc.data();
      Products.push({
        key: doc.id,
        doc, // DocumentSnapshot
        title,
        status
      });
    });
    this.setState({
      Products
   });
  }

  handleChange = event => {
    this.setState({ filter: event.target.value });
  };

  componentDidMount() {
    this.unsubscribe = this.ref.onSnapshot(this.onCollectionUpdate);
  }

  render() {
    const { filter, Products } = this.state;
    const lowercasedFilter = filter.toLowerCase();
    const filteredData = Products.filter(item => {
      return Object.keys(item).some(key =>
        typeof item[key] === "string" && item[key].toLowerCase().includes(lowercasedFilter)
      );
    });

    return (
      <div class="container">
        <div class="panel panel-default">

          <input value={filter} onChange={this.handleChange} placeholder="Search Book"/>
          <div class="panel-body">
            <table class="table table-stripe">
              <thead>
                <tr>
                  <th>Title</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {filteredData.map(item => (
                  <tr>
                    <td><Link to={`/show/${item.key}`}>{item.title}</Link></td>
                    <td>{item.status}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

        </div>
      </div>
    );
  }
}

export default App;

but now I want to add another filter, to specificly filter the book by it's status from my firebase {Product.status}.

something like this,

<input value={filter} onChange={this.handleChange} placeholder="Search Book"/>
<select className="ml-2 mb-2">
 {this.state.Products.map(Products => (
  <option onClick={???}>{Products.status}</option>
 ))};
</select>

How can I do it?? what should I write here onClick={???} to make the result only show the selected status and keyword typed.

Upvotes: 0

Views: 175

Answers (1)

Tareq Aziz
Tareq Aziz

Reputation: 351

You can do an array search based on the collection's node value like this

const thfilteredData = firebase_data.filter(({name}) => {
name = name.toLowerCase();
       return name.includes(value.toLowerCase());
   });
setFiltredRestaurants(thfilteredData);

I have used the name to match the name value of the child node. You can put it onChange of the search input or for the onClick you can just create a function and pass the option value to match. In your case this could like below.

filterProducts = (status) => {
    const thfilteredData = Products.filter(({productstatus}) => productstatus === status);
    this.setState({
        filteredData: thfilteredData
    });
}

Upvotes: 1

Related Questions