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)));
}
<Input />onChangeonChange?onSubmitfunction?