//form.js file to send a request to back end
import React, { Component } from 'react';
import axios from 'axios';
export default class Form extends Component {
constructor(props) {
super(props);
this.onChangeParameter = this.onChangeParameter.bind(this);
this.onChangeParamValue = this.onChangeParamValue.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
parameter: '',
paramValue: ''
}
}
onChangeParameter(e) {
this.setState({parameter: e.target.value});
}
onChangeParamValue(e) {
this.setState({paramValue: e.target.value});
}
onSubmit(e) {
e.preventDefault();
const params = {
parameter: this.state.parameter,
paramValue: this.state.paramValue
}
axios.get('http://localhost:3000/src/server.js/sample', params).then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
}
render() {
return(
<form className="container text-center" onSubmit={this.onSubmit}>
<h3 className="text-warning">Search for Characters to Manage</h3>
<div className="form-group">
<select className="form-control btn btn-lg" name="parameter" value={this.state.value} onChange={this.onChangeParameter}>
<option>SELECT</option>
<option value="1">Charid</option>
<option value="2">Character Name</option>
<option value="3">Username</option>
<option value="4">Forum Account</option>
</select>
</div>
<div className="form-group">
<label>-Enter parameter to search by-</label>
<input
type="text"
className="form-control text-center"
name="paramValue"
placeholder="12345"
value={this.state.value}
onChange={this.onChangeParamValue}
required
/>
</div>
<button className="btn btn-lg btn-primary" type="submit" name="submitBtn">Search</button>
</form>
);
}
}
---------------------------------
//server.js file to receive request and do something with it
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(express.static('public'));
app.get('/sample:parameter/sample:paramValue', (req, res) => {
let list = ["item1", "item2", "item3"];
res.json(list);
console.log('Sent list of items');
});
app.listen(PORT, () => {
console.log(`Listening on port ${PORT}`);
});
Comments