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

CodePudding user response：

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