Home React JS Inventory Management App in React

Inventory Management App in React

3 min read

This article explain how to make a Inventory Management App in React.this app consist of two options GR and KG.  Total will be calculated according the option user  has selected.

Install the React

npx create-react-app inventory-app

Create a Component folder inside the folder create the file ChickenShop.jsx.


import { useState } from "react";

function ChickenShop() {
  const [selects, setSelects] = useState('GR');
  const [qty, setQty] = useState();

  function calculation() {

    if (!qty) 
       return 0; 
    else if(selects == "KG") 
      return (qty * 140) ;
       return (qty /1000 * 140 );

  return (

    <div className="container">
      <div class="alert alert-primary" role="alert">
      <h3>Chicken Shop Inventory</h3>


      <div className="form-group">
          placeholder="Enter Qty"
          onChange={(event) => {setQty(event.target.value);}}

      <div className="form-group">
          value = {selects}
          onChange={(event) => {setSelects(event.target.value); }}>
          <option value="GR">GR</option>
          <option value="KG">KG</option>

      <br />

      <div class="alert alert-danger" role="alert">
      <p><b>Total:</b> {calculation()}<br/>
      <b>Selected: </b>  {selects}<br />
      <b> Quantity: </b> {qty}</p>

    <div class="alert alert-success" role="alert">
    <input type="text" class="form-control" placeholder="Net Salary" value={calculation()} />


export default ChickenShop;

i have attached the video link below. which will do this tutorials step by step.



    Load More Related Articles
    Load More By admin
    Load More In React JS

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Check Also

    Laravel 11 CRUD Mastering RESTful API MVC with Repository Pattern

    In this tutorial will teach Laravel 11 Api MVC with Repository Pattern Crud Application st…