Axios Post Request does not function React

Question

I'm new to react and Axios and I want to send a set of data to an API using Axios in React, this is the data format in API:

{
    "company_name": "Karno",
    "title": "Devops Engineer",
    "internal_code": 856789,
    "department": 1,
    "location": 2,
    "tags": [10, 11],
    "benefits": "At Snapp, we like spending ...",
    "description": "About Snapp..." 
    "requirements": "Mandatory QualificationsStrong Linux administration skills..."
}

and this is my code which is going to send these data when a button is pressed (these data are saved in the props and shown on this confirmation form page) to the API, but my post request doesn't seem to work, I don't receive any response from the server and I don't see any POST request in my server log

const headers = {
  'content-type': 'application/json',
  'Authorization': 'Token bba27954e46823f1f82ff2c89d19f5802e46fd3f'
}

export class Confirmation extends Component {
  state = {
    title: '',
    company_name: '',
    internal_code:'',
    department:'',
    location:'',
    tags:[],
    benefits:'',
    description:'',
    requirements:''
  }

  handleSubmit = event => {
    event.preventDefault();

    const job = {
      title:this.values.Title,
      company_name:this.values.Company,
      internal_code:this.values.InternalCode,
      department:this.values.Department.id,
      location:this.values.Location.id,
      tags:this.values.Tags.map(tag=>tag.id).join(', '),
      benefits:this.values.Benefits,
      description:this.values.Detailss,
      requirements:this.values.requirements
    }
    axios.post('/api/jobs/job-creation/',{headers:headers}, job)
    .then(res=> {
      console.log(res)
      console.log(res.data)
    })
  }

continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };

render () {
    const {
      values: {
        Title, Benefits,
        Company, InternalCode, Detailss, Department,Tags, Salary,requirements,Location,newTags
      }
    } = this.props
 return (
    <form  onSubmit={this.handleSubmit}>
      <div className='container'>
 <div className='content'>
          <Container>
            <Row>
              <Col xs='6' sm='4' className='TextContent'>
                <Row className='TextInside'> Salary: {Salary} </Row>
                <Row>  Location: {Location.label}</Row>
                <Row>  New Tags: {newTags.join(', ')} </Row> 
              </Col>
              <Col xs='6' sm='4' className='TextContent'>
                <Row>   Company: {Company}</Row>
              // info in the {} are shown on page and need to be sent to api
                <Row>   Internal Code: {InternalCode}</Row> 
                <Row>   Pre Tags: {Tags.map(tag=>tag.label).join(", ")}</Row>
                <Row>   Department: {Department.label}</Row>  
              </Col>
              <Col xs='6' sm='4' className='TextContent'>
                <Row>   Job Title: {Title}</Row>
                <Row>   Benefits: {Benefits}</Row>
              </Col>
            </Row>
          </Container>
        </div>
       <div className='Detailss' style={{width:'1000px'}}>
         {Detailss}
       </div> 
<div className='req'>
       {requirements}
      </div>


      //buttons
      <div className='buttons-container' style={{position:'relative',bottom:'20px'}}>
       <button onClick={this.back} className='previous'>قبلی</button> 
       <button type='submit' onClick={this.continue} className='next'>ادامه</button>
     </div>

     </Container>
     </Container>
    </div>
    </form>

what am I doing wrong here?

@HMR no, I have a few get requests that work properly and another post request that works properly too but this post request doesnt even come up in logs — lydal
Check the network tab and console logs in browser, it could be blocked by CORS or some other security policy. — Alex Khristo
@Kotofenum CORS are unlikely because in the question OP is posting to /api/jobs/job-creation/ — HMR
have you checked that handleSubmit runs at least until axios function call? — Alex Khristo

Alex Khristo Alex Khristo · Accepted Answer · 2020-05-04T16:41:11

Your onClick listener on submit button triggers redirect before the onSubmit handler of form is fired. Remove onClick listener and move this.continue() to .then callback of the post request.

Also, remove 'e' parameter from continue method and e.preventDefault, and change this.values to this.props.values in job object.

Axios Post Request does not function React

1 Answers