I want to post the dropdown value from react to NodeJS. my react code:

import React from 'react'
import axios from 'axios'
export default class Inference extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
       
        model: "",
 
        options: [
          { label: "Cat", value: "cat" },
          { label: "Traffic", value: "traffic" },
          { label: "Dog", value: "dog" },
        ],
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(e) {
     
      this.setState({ model: e.target.value });
      console.log("Model Selected!!");
    }



    handleSubmit(event) {
      event.preventDefault();
      const { example } = event.target;
      console.log("value", example.value);
    }
  
    componentDidMount() {
        axios
    .post('http://localhost:5000/getmodel', {
  
      model: this.state.model,
   
    })
    .then((res) => {
      // Res.data is the response from your server
      console.log(res.data);
    });

    }
  
    render() {
     
  
      const {  options } = this.state;
  
   
  
      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" }}
              >
                Model
                <form method="post" action="/getmodel" 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>
  
               
  
                  <button
                    type="submit"
                    class="btn btn-success"
                    style={{ marginTop: "100px" }}
                  >
                    Inference
                  </button>
                </form>
   </label>
            </div>
          </div>
        </div>
      );
    }
  }

my nodejs code:

  app.post('/getmodel', (req, res) => {
        // Logs course sent from front end
        console.log(req.body.model);
      });
      app.get('/', function (req, res) {
        // Cookies that have not been signed
      console.log('hello: ',req.body)
    
      })

please guide me how to post the value to NodeJS so I can get value by req.body.model or something like that. how to get value from react as well I needed Main motive: i want to get the dropdown selected value from reactjs to NodeJS. i need some help in react post code and node get(for that post code) kindly help me

CodePudding user response：

You can use axios to submit the request and include the information in the body of the request. The second parameter of the post method from axios is the body of your request. Here is an example of how to make an axios POST request with data.

axios
    .post('/some_endpoint', {
      dataset: this.state.dataset,
      model: this.state.model,
      course: this.state.course,
    })
    .then((res) => {
      // Res.data is the response from your server
      console.log(res.data);
    });

Now on your backend, you can access course through req.body

router.post('/some_endpoint', (req, res) => {
  // Logs course sent from front end
  console.log(req.body.course);
});

CodePudding user response：

You added the axios in componentDidMount which is wrong, POST should happen when you submit the form. componentDidMount will call after every render it is a a lifecycle method. Please go through react documentation for a better explanation Try this code POST API will call when you click the submit button which is "Inference" button

import React from 'react'
import axios from 'axios'
export default class Inference extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
       
        model: "",
 
        options: [
          { label: "Cat", value: "cat" },
          { label: "Traffic", value: "traffic" },
          { label: "Dog", value: "dog" },
        ],
      };
      this.handleChange = this.handleChange.bind(this);
    }
  
    handleChange(e) {
     
      this.setState({ model: e.target.value });
      console.log("Model Selected!!");
    }

    handleSubmit(event) {
      event.preventDefault();
      axios.post('http://localhost:5000/getmodel', {
        model: this.state.model,
      })
       .then((res) => {
        // Res.data is the response from your server
        console.log(res.data);
      });
    }
  

  
    render() {
     
  
      const {  options } = this.state;
  
   
  
      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" }}
              >
                Model
                <form onSubmit={this.handleSubmit.bind(this)}>
                  <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>
  
               
  
                  <button
                    type="submit"
                    class="btn btn-success"
                    style={{ marginTop: "100px" }}
                  >
                    Inference
                  </button>
                </form>
              </label>
            </div>
          </div>
        </div>
      );
    }
  }