I want to query a database with the values i get from dropdown menu. my dropdown will look like this
my nodejs db query will look like this
app.get('/model', (req,res)=>{
let sql ="select * from new_schema.model_list,new_schema.images where model_name='?' and dataset='?';"
db.query(sql, (err,results) =>{
if(err){
throw err
}
console.log(results)
res.send(results);
})
})
I want the dropdown selected values pass to the NodeJS query above
my dropdown code:
const options = [
{
label: “Cat”,
value: “cat”,
},
{
label: “Traffic”,
value: “traffic”,
},
{
label: “Dog”,
value: “dog”,
},
];
class Inference extends React.Component {
constructor(props) {
super(props);
this.state = {
courses: [],
course: "",
model:'',
dataset:''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
console.log("Model Selected!!");
this.setState({ model: e.target.value });
};
handleChangeDataset(e) {
console.log("Dataset Selected!!");
this.setState({ dataset: e.target.value });
};
handleChangeCourse = event => {
this.setState({ course: event.target.value });
};
getUnique(arr, comp) {
const unique = arr
//store the comparison values in array
.map(e => e[comp])
// store the keys of the unique objects
.map((e, i, final) => final.indexOf(e) === i && i)
// eliminate the dead keys & store unique objects
.filter(e => arr[e])
.map(e => arr[e]);
return unique;
}
componentDidMount() {
axios.get('http://localhost:5000/files')
.then(response => this.setState({ courses: response.data }));
}
render() {
const uniqueCouse = this.getUnique(this.state.courses, "dataset");
const courses = this.state.courses;
const course = this.state.course;
const filterDropdown = courses.filter(function(result) {
return result.dataset === course;
});
return (
<div className="container">
<div className="row">
<div className="col-6" style={{paddingBottom:"100px",paddingTop:"20px",alignItems:"center"}}>
<label className=""style={{paddingTop:"5px",marginTop:"40px"}}>
Dataset
<select className="custom-select"
value={this.state.course}
onChange={this.handleChangeCourse} style={{paddingTop:"5px",marginTop:"10px"}}
>
<option>--Select--</option>
{uniqueCouse.map(course => (
<option key={course.id} value={course.dataset}>
{course.dataset}
</option>
))}
</select>
</label>
</div>
<div className="col-6" style={{paddingBottom:"100px",paddingTop:"20px",alignItems:"center"}}>
<label className=""style={{paddingTop:"5px",marginTop:"40px"}}>
Model
<form method="post" action="getJson">
<select className="custom-select" name="example"
value={this.state.model} onChange={this.handleChange} style={{paddingTop:"5px",marginTop:"10px"}}
>
<option>--Select--</option>
{options.map((option) => (
<option value={option.value} onChange={(e) => this.setState({model:e.target.value}) }>{option.label}</option>
))}
</select>
</form>
</label>
</div>
{filterDropdown.map(course => (
<div className="col-2">
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1" className="labell">
<img key={course.id} src={`${course.path}`} height="80" className="card-img-top img-responsive" alt="img" />
</label>
</div>
))}
</div>
<button type="button" class="btn btn-success" style={{marginTop:"100px"}}>Inference</button>
</div>
);
}
}
i want to pass the selected value to nodejs code.i have tried a lot but it just doesn’t work i would be really happy if i get any help from you guys, i am new to the full stack development so can anyone guide me please
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
First change this.state({model:e.target.value}) to this.setState({model:e.target.value}). Then say what problem you are having
Edit:
You need all the user inputs inside form. So onSubmit you can get them. Here you will find in handleSubmit, I am logging the value
import React from "react";
export default class Inference extends React.Component {
constructor(props) {
super(props);
this.state = {
courses: [],
course: "",
model: "",
dataset: "",
options: [
{ label: "Cat", value: "cat" },
{ label: "Traffic", value: "traffic" },
{ label: "Dog", value: "dog" },
],
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
console.log("Model Selected!!");
this.setState({ model: e.target.value });
}
handleChangeDataset(e) {
console.log("Dataset Selected!!");
this.setState({ dataset: e.target.value });
}
handleChangeCourse = (event) => {
this.setState({ course: event.target.value });
};
getUnique(arr, comp) {
const unique = arr
//store the comparison values in array
.map((e) => e[comp])
// store the keys of the unique objects
.map((e, i, final) => final.indexOf(e) === i && i)
// eliminate the dead keys & store unique objects
.filter((e) => arr[e])
.map((e) => arr[e]);
return unique;
}
handleSubmit(event) {
event.preventDefault();
const { example } = event.target;
console.log("value", example.value);
}
componentDidMount() {
// axios
// .get("http://localhost:5000/files")
// .then((response) => this.setState({ courses: response.data }));
let data = [
{
id: 1,
name: '"black.jpeg"',
path: "kaet1.s3.amazonaws.com/black-1634797820425.jpeg",
dataset: "dataset",
username: "user",
model: "traffic",
createdAt: "2021-10-21T01:00:22.000Z",
updatedAt: "2021-10-21T01:00:22.000Z",
},
];
this.setState({ courses: data });
}
render() {
const uniqueCouse = this.getUnique(this.state.courses, "dataset");
const { courses, course, options } = this.state;
const filterDropdown = courses.filter(function (result) {
return result.dataset === course;
});
return (
<div className="container">
<div className="row">
<div
className="col-6"
style={{
paddingBottom: "100px",
paddingTop: "20px",
alignItems: "center",
}}
>
<label
className=""
style={{ paddingTop: "5px", marginTop: "40px" }}
>
Dataset
<select
className="custom-select"
value={this.state.course}
onChange={this.handleChangeCourse}
style={{ paddingTop: "5px", marginTop: "10px" }}
>
<option>--Select--</option>
{uniqueCouse.map((course) => (
<option key={course.id} value={course.dataset}>
{course.dataset}
</option>
))}
</select>
</label>
</div>
<div
className="col-6"
style={{
paddingBottom: "100px",
paddingTop: "20px",
alignItems: "center",
}}
>
<label
className=""
style={{ paddingTop: "5px", marginTop: "40px" }}
>
Model
<form method="post" onSubmit={this.handleSubmit}>
<select
className="custom-select"
name="example"
value={this.state.model}
onChange={this.handleChange}
style={{ paddingTop: "5px", marginTop: "10px" }}
>
<option>--Select--</option>
{options.map((option) => (
<option
value={option.value}
onChange={(e) => this.setState({ model: e.target.value })}
>
{option.label}
</option>
))}
</select>
{filterDropdown.map((course) => (
<div className="col-2">
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1" className="labell">
<img
key={course.id}
src={`${course.path}`}
height="80"
className="card-img-top img-responsive"
alt="img"
/>
</label>
</div>
))}
<button
type="submit"
class="btn btn-success"
style={{ marginTop: "100px" }}
>
Inference
</button>
</form>
</label>
</div>
</div>
</div>
);
}
}
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0