How to Make Income Tracker in React

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by ReactJS Guru

In this article, we will create an income tracker in react. Here we have some fields where user can write their income source, income and date. As user fill these, user clicks on button and data will be entered on list, and we update the total income. It is a very basic project to learn, not too much fancy but it will be good enough to make it.

This project won’t be too hard to do, but it will be very simple and easy to do. So let’s make this application step-by-step.

Pre-requisites to Make Income Tracker in React

Basic knowledge of ReactJS.
Basic knowledge of CSS.
Basic knowledge of React props and hooks.
Good knowledge of React Components.

Customizing App Component

Firstly, we will make some changes in App.js component. Here we have imported our required components like React, Header, IncomeForm, IncomeList and hooks which are going to help us to make this project. We will define Header, IncomeForm, IncomeList components as we progress in this project.

Now in App component, we have created two states, one for income and the other for total income with initial values null and 0 respectively. After that in return, we have made an App

, in which we have added all component with props. Here we have passed states as props because these values are going to change as user input them, and we can work with updated values.Read More

This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by ReactJS Guru