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)}
>
×
</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);