How to query MongoDB database using MongoDB, Express, React, and Node? - node.js

Question

I cannot for the life of me figure out how to use a React, Express, Node, and MongoDB together to query the MongoDB database and display that information onto the DOM. My query works when hardcoded in, but when using the front-end text input, it does not work. Here is the code:
React Component:
const { facilities } = this.props.facility;
return(
<Container>
<Form onSubmit={this.onSubmit}>
<FormGroup>
<Input
type="text"
name="facilityState"
id="facilityState"
placeholder="Search State"
value={query}
onChange={this.onChange}
/>
</FormGroup>
<Button
color="dark"
style={{marginTop: '2rem'}}
block
> Search </Button>
</Form>
<Button onClick={this.checkReduxState}> Check Redux State </Button>
{ this.props.isAuthenticated ?
<ListGroup>
<TransitionGroup className="facilities-list">
{facilities.map(({_id, name, address, city, state, zip, phone, email}) => (
<CSSTransition key={_id} timeout={500} classNames="fade">
<ListGroupItem>
{ this.props.isAuthenticated ?
<Button
className="remove-btn"
color="danger"
size="sm"
onClick={this.onDeleteClick.bind(this, _id)}
> ×</Button> : null }
<p> {name} </p>
<p> {address} </p>
<p> {city} </p>
<p> {state} </p>
<p> {zip} </p>
<p> {phone} </p>
<p> {email} </p>
</ListGroupItem>
</CSSTransition>
))}
</TransitionGroup>
</ListGroup> : null
}
</Container>
Express Route:
router.get('/query', (req, res) => {
Facility.find({
state: req.body.facilityState
// state: req.query.facilityState
})
.then(facilities => res.json(facilities));
});
Mongoose Schema:
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// mongoose.set('useCreateIndex', true);
const FacilitySchema = new Schema({
name: {
type: String,
required: true
},
address: {
type: String,
// text: true,
required: true
},
city: {
type: String,
required: true
},
state: {
type: String,
text: true,
index: true,
required: true
},
zip: {
type: Number,
required: true
},
phone: {
type: Number,
required: true
},
email: {
type: String,
required: true
},
});
// FacilitySchema.index({state: 'text'});
module.exports = Facility = mongoose.model('facility', FacilitySchema);
When I hard code the desired string value in for req.body.facilityState, pressing the submit button on the user interface works. Also, when using Postman this route works. But for some reason, the express req.body(or req.query) and the component aren't communicating with each other like they should. Can anyone help with this?
EDIT
Here is onChange function:
onChange = (e) => {
this.setState({ [e.target.name] : e.target.value })
}
EDIT 2
Here is redux action file query:
export const queryFacilities = () => dispatch => {
dispatch(setFacilitiesLoading());
axios
.get('/api/facilities/query')
.then(res =>
dispatch({
type: QUERY_FACILITIES,
payload: res.data
}))
.catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}

Answer 1

I fixed the issue by changing my API call from
router.get('/query', (req, res) => {
Facility.find({
state: req.body.facilityState
// state: req.query.facilityState
})
.then(facilities => res.json(facilities));
});
to
router.get('/query/:state', (req, res) => {
Facility.find({
state: req.params.state
})
.then(facilities => res.json(facilities));
});
and also changing my Redux action from
export const queryFacilities = () => dispatch => {
dispatch(setFacilitiesLoading());
axios
.get('/api/facilities/query')
.then(res =>
dispatch({
type: QUERY_FACILITIES,
payload: res.data
}))
.catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}
to
export const queryFacilities = (state) => (dispatch, getState) => {
dispatch(setFacilitiesLoading());
axios
.get(`/api/facilities/query/${state}`)
.then(res =>
dispatch({
type: QUERY_FACILITIES,
payload: res.data
}))
.catch(err => dispatch(returnErrors(err.response.data, err.response.status)));
}
So essentially I was able to pass my input through to the API by using req.params, not by using req.body.