0

So I was able to add a search input to filter the data I receive from the database from help here, Could anybody walk me through how I can go about filtering multiple inputs and displaying on the results that are searched. I want to filter by searchedValue, filterDay, filterCity.. Right now the app is displaying the entire list of items from the database or only what is listed in the searchedValue input.

Also if anybody could send me documentation on how to only get the data from db when searched instead of constantly getting that data on every refresh. I'm sorry if my question is unclear here.

Thanks.

import React, { Component } from 'react';
import { Table, Input } from 'reactstrap';
import { connect } from 'react-redux';
import { getItems, deleteItem } from "../actions/itemActions";
import PropTypes from 'prop-types';

class Directory extends Component {

    constructor() {
        super();

        this.state = {
            searchedValue: '',
            filterDay: '',
            filterCity: ''
        };
    }

    componentDidMount() {
        this.props.getItems();
    }

    onDeleteClick = (id) => {
        this.props.deleteItem(id);
    }

    onSearch = e => {
        this.setState({ searchedValue: e.target.value });
    }

    onFilterDay = e => {
        this.setState({ filterDay: e.target.value });
    }

    onFilterCity = e => {
        this.setState({ filterCity: e.target.value });
    }

    render() {
        const { items } = this.props.item;
        const filteredNames = items.filter((item) => item.MeetingName.includes(this.state.searchedValue));

        return(
            <div>
                <Input type="text" placeholder="search" onChange={this.onSearch} value={this.state.searchedValue} />
                <Input type="select" name="day" onChange={this.onFilterDay} value={this.state.filterDay}>
                    <option>SUNDAY</option><option>MONDAY</option><option>TUESDAY</option>
                </Input>
                <Input type="select" name="day" onChange={this.onFilterCity} value={this.state.filterCity}>
                    <option>DANA POINT</option><option>LAGUNA BEACH</option><option>SAN CLEMENTE</option>
                </Input>
                <br/>
                <Table>
                    <thead>
                    <tr>
                        <th>Day</th><th>Time</th><th>Meeting Name</th><th>Address</th><th>City</th><th>Zip Code</th><th></th>
                    </tr>
                    </thead>
                        <tbody>
                        {filteredNames.map(({ _id, Day, Time, MeetingName, Address, City, Zip }) => (
                            <tr key={_id}>
                                <td>{Day}</td><td>{Time}</td><td>{MeetingName}</td><td>{Address}</td><td>{City}</td><td>{Zip}</td>
                                {/*<Button
                                    className="remove-btn"
                                    color="danger"
                                    size="sm"
                                    onClick={this.onDeleteClick.bind(this, _id)}
                                >
                                    &times;
                                </Button>*/}
                            </tr>
                        ))}
                        </tbody>
                    </Table>
            </div>
        );
    }
}

Directory.propTypes = {
    getItems: PropTypes.func.isRequired,
    item: PropTypes.object.isRequired
}

const mapStateToProps = (state) => ({
    item: state.item
})


export default connect(
    mapStateToProps,
    { getItems, deleteItem }
    )(Directory);

1 Answer 1

2

I recently did the multi search in my project you can consider this as an example

   searchBy = () => {
   let searchBy = [];
   {
   searchBy.push(
    ...this.state.originalResponse.filter(item => {
      let searchText =
        this.state.searchText != ""
          ? item.question
              .toLowerCase()
              .search(this.state.searchText.toLowerCase()) !== -1
          : true;
      let category =
        this.state.category != ""
          ? item.type.toLowerCase() === this.state.category.toLowerCase()
          : true;
      let level =
        this.state.level != ""
          ? item.difficulty.toLowerCase() === this.state.level.toLowerCase()
          : true;

      return searchText && category && level;
    })
  );
  }
  console.table(searchBy, ["id", "question", "difficulty", "type"]);
  this.setState({ userArray: searchBy });
  };

https://github.com/AdnanShah/Sawal-Jawab-Game-App/blob/frontend/src/components/QuestionsList/index.js

This component fetch data from back-end and display the data based on the multiple search.Hope this help

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.