Q: Correct way posting JSON from Reactstrap form

Question

I'd like to get the JSON from a form I created using Reactstrap in order to be able to post it against my backend.

I've found this example. I want to use Reactstrap so I wasn't able to put an onSubmit={this.handleSubmit} onto the Form component. This is why I thought of replacing the Form component with a classic form tag but the FormData stays empty.

Here is my code for this.

I appreciate every advice.

Greetings

Answer 1

If you want to use Form component from ReactStrap you should place a button with type="Submit" for onSubmit={this.handleSubmit} to work.

Making this change and changing form component to Form should work.

<FormGroup check row>
  <Col sm={{ size: 10, offset: 2 }}>
    <Button type="submit">Submit</Button>
  </Col>
</FormGroup>

And to get the data you can do

 submitForm(event) {
    event.preventDefault();
    const data = new FormData(event.target);
    console.log(data.get('author'));
    console.log(data.get('datTo'));
    console.log(data.get('dateFrom'));    
  }