An Interest In:
Web News this Week
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
Creating a Simple React Shopping Cart
In today post we will develop a simple shopping cart in reactjs by using usetheform, a react library for composing declarative forms and managing their state. Lets start it.
Installation
To install the package run the following npm command:
npm i usetheform --save
Components
In order to build our simple shopping cart we are going to leverage some components provided by usetheform:
<Form />: renders all the fields and keeps the entire form state synchronized.
<Collection />: creates a nested piece of state within a Form and it can can be of type: object or array.
<Input />: renders all the inputs of type listed at: W3schools Input Types and accepts as props any HTML attribute listed at: HTML Input Attributes.
On top of them we are going to develop others two components:
CartItem Component
It uses <Input /> to represent: id, description, quantity and the price of the item added.
./CartItem.js
import React from "react";import { Input, Collection } from "usetheform";const preventNegativeQty = val => (val < 1 ? 1 : val);export function CartItem({ qty, price, onRemoveItem, id, desc }) { return ( <Collection object> <Input type="hidden" name="id" value={id} /> <div className="field"> <label>Item</label> <Input type="text" name="item" readOnly value={desc} /> </div> <div className="field"> <label>Quantity</label> <Input reducers={preventNegativeQty} type="number" name="qty" value={qty} /> </div> <div className="field"> <label>Price </label> <Input type="text" name="price" value={price} disabled readOnly /> </div> <div className="field"> <button type="button" onClick={() => onRemoveItem(id)}> Remove </button> </div> </Collection> );}
The CartItem component uses a Collection of type object which creates a piece of state within the form as following:
{ id: 1, item: "Item name", qty: 1, price: "3.3" }
Cart Component
It uses <Collection /> to hold the cart items.
./Cart.js
import React from "react";import { Collection } from "usetheform";import { CartItem } from "./CartItem";export function Cart({ items, onRemoveItem }) { return ( <Collection object name="cart"> <Collection array name="items"> {items.map(item => ( <CartItem {...item} onRemoveItem={onRemoveItem} key={item.id} /> ))} </Collection> </Collection> );}
The Cart component uses two Collections one of type object named cart and a nested one named items which holds a list of CartItem components and creates a piece of state within the form as following:
{ cart: { items: [{ id: 1, item: "Item name", qty: 1, price: "3.3" }, {....}] }}
App Component
./App.js
import React, { useState } from "react";import Form from "usetheform";import { Cart } from "./Cart";export default function App() { const [items, setCartItem] = useState([]); const onRemoveItem = (idToRemove) => setCartItem((prev) => prev.filter(({ id }) => id !== idToRemove)); const onAddItem = () => { const item = createRandomItem(); setCartItem((prev) => [...prev, item]); }; const onChange= (state, isFormValid) => console.log('CHANGE', state, isFormValid); const onSubmit= (state) => console.log('SUBMIT', state); return ( <div className="App"> <Form onChange={onChange} onSubmit={onSubmit}> <Cart items={items} onRemoveItem={onRemoveItem} /> <button type="submit">Submit</button> </Form> <br /> <button type="button" onClick={onAddItem}> Add item to cart </button> </div> );}let id = 0;const createRandomItem = () => { id = id + 1; return { id, qty: 1, desc: `Item number: ${id}`, price: Number((Math.random() * 10 + 1).toFixed(2)) };};
An Extended CodeSandbox Example:
Conclusion
Hope you enjoyed reading this post. If you did so, please checking out the usetheform repo, or even better contribute to usetheform. Thanks .
iusehooks / usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
An easy way for building forms in React.
What is usetheform about?
Usetheform is a React library for composing declarative forms and managing their state. It uses the Context API and React Hooks. I does not depend on any library like redux or others.
Zero dependencies
Only peer dependencies: React >= 16.8.0
Installation
npm install --save usetheform
Quickstart
import React from "react"import Form, { Input, useValidation } from "usetheform"export default function App() { const onChange = (formState) => console.log("ON_CHANGE : ", formState) const onSubmit = (formState) => console.log("ON_SUBMIT : ", formState) const preventNegativeNumber = (next, prev) => (next <= 0 ? 0 : next); const required
Original Link: https://dev.to/antonio_pangall/creating-a-simple-react-shopping-cart-3gho
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To