CODEWITHSUNDEEP
javascriptreactjs
Ankzious
Ankzious

Reputation: 325

React Dropdown to POST value in API

Iam trying to POST some value from a Dropdown selected value in to a API. Instead of posting or changing value Iam getting a 405 (Method Not Allowed) error always. I Changed the onChange event handler in following ways as well:

  1. onChange{(e) => this.onChangeHandler(e.target.value)}
  2. onChange{() => this.onChangeHandler(e.target.value)}
  3. onChange{this.onChangeHandler}

But nothing helps to Post the selected value to the API.

My Dropdown and onChangeHandler method looks like this:

onChangeHandler(e) {
    let fd = new FormData()
    fd.append("api_value", this.state.user.value);
    axios({
        method: 'post',
        url: `${api}/project/user`,
        data: fd,
    }).then(response => {
      console.log(response)
    })
  }
  
<select 
value={value} 
className="form-control" 
onChange={()=>this.onChangeHandler(this.state.user.value)}>

<option value="abc">abc</option>
<option value="def">def</option>
<option value="ghi">ghi</option>

</select>

Upvotes: 1

Views: 789

Answers (1)

graysonthemason
graysonthemason

Reputation: 61

The problem is not in how your function is being called. The 405 error is a response from the server and is probably related to not having permissions to make a post request to that api. That being said, on a quick look, I don't think your #2 onChange function will run because 'e' will not be defined. Also, you're sending the state property to the api, and it doesn't look like you're updating the state in your select onChange function, just passing it whatever it is initially set to. I would look into the api docs and see if they require authorization headers in the requests, and also console.log your FormData prior to sending to the api to make sure you're getting the correct value.

Upvotes: 1

Related Questions