Create a Submit Form in React using ReactStrap

This will guide you to create a submit form very easily using reactstrap npm package. There can be many ways to implement a form but I found this as a simple way as a beginner.

First of all you need to add reactstrap to your project.

npm install reactstrap 

Reactstrap does not include Bootstrap CSS so this needs to be installed as well

npm install bootstrap

Then you need to Import Bootstrap CSS in the src/index.js file

import 'bootstrap/dist/css/bootstrap.min.css';

You need to import reactstrap to your implementation.

After that you can start your implementation, in this I’m going to show simple registration form.

In this I have implemented simple form using reactstrap and it looks like bellow. I have added some margins to the form in CSS file.

Lets look on how to get the data after submitting the form. To do this you need to install react-hook-form.

npm install react-hook-form

You need to import react-hook-form as bellow.

import {useForm} from "react-hook-form";

Rest of the implementation can be done as bellow.

When you click on the submit button you can see the data related to this form as a console output.

Thank You for Reading. Happy Coding.