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?

Answer 1

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.