CODEWITHSUNDEEP
reactjsdjangoaxioscomponentsbad-request
David Paredes
David Paredes

Reputation: 21

400 bad request during axios call

Not sure why but the POST request is coming back 400. Postman says my django backend is doing fine. It all happens at the post_flashcards method any help would be great and I am willing to show any other code as requested. although there shouldnt be the need to since this component acts mostly on its own.

class CreateFlashCard extends Component {
    constructor(props) {
        super(props); 
        this.state = {
            title: '',
            collection_id: '',
            term: '',
            definition: '',
        }

        this.handleSubmit = this.handleSubmit.bind(this)
     }  
    
    onChange = (e) => {
        this.setState({[e.target.name]: e.target.value});
    }

    handleSubmit(e) {
        e.preventDefault();
        
        this.post_flashcard()
    } 

    async post_flashcard() {
        const card = this.state;
        const col_id = parseInt(this.state.collection_id)
        try{
            await axios.post(`http://127.0.0.1:8000/flashcardsapp/${col_id}`, card)
            .then(response => console.log(response.status))
        }catch(er){
            console.log('ERROR in post_flashcard', er)
        }
    }
     
    
    render() { 
        const {title, collection_id, term, definition} = this.state
        return (
            
           <form onSubmit={this.handleSubmit}>
               <h2>Create a Card</h2>
               <label for="title">Enter Collection Title</label>
               <input type="text" name="title" value={title} onChange={this.onChange} ></input>
               <label for="collection_id">Enter Collection ID</label>
               <input type="number" name="collection_id" value={collection_id} onChange={this.onChange} ></input>
               <label for="term">Enter Term</label>
               <input type="text" name="term" value={term} onChange={this.onChange} ></input>
               <label for="definition">Enter Definition</label>
               <input type="text" name="definition" value={definition} onChange={this.onChange} ></input>
               <input type="submit"></input>
           </form>
        );
    }
}
 
export default CreateFlashCard;

Upvotes: 1

Views: 1322

Answers (2)

David Paredes
David Paredes

Reputation: 21

I solved the issue state had typo in title needed to be collection_title.

Upvotes: 0

Cevher Bakan
Cevher Bakan

Reputation: 1

If you are doing post processing, you can convert the Data to Json format and send it.

   var post_data = {
    your_post_name: this.state
  };

  axios
    .post(url, JSON.stringify(post_data))
    .then((response) => {

      console.log(response);
    })
    .catch((error) => {
      console.log(error);
    });

or

      axios
.post(url,JSON.stringify({your_post_name:this.state}))
        .then((response) => {

          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });

Upvotes: 1

Related Questions