Generate invoice with React-js

Siddharth Murugan
3 min readAug 1, 2022
Generate invoice with react-js

Are you new to react and you want to create something new with it?! Then this article is for you. Here we are going to create a billing application which could just convert our HTML form into a PDF file which will look like a copy of bill. Let’s get started!

Prerequisite:

//For creating react app named practise:
npx create-react-app practise
//To create pdf file in form of table:
npm i jspdf
npm i jspdf-autotable

About our app:

Our app will have the following qualities:

  • We could add item name, quantity, cost of one item and their corresponding total which we will calculate based on the number of quantity and cost we add in the input box.
  • Also we are going to calculate total billing amount based on total of each items added.
  • Upon clicking submit button
Billing app

Creating state named item:

Let’s create a state named item and then initialize the needed objects value with empty or zero as below,

--

--

Siddharth Murugan

Programmer who loves to do things creatively. #automationTester by profession #javascript #nodejs #reactjs