Question 221953 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to do calculations in price list page with reactjs?

I am learning to react.I am recreating a webpage with react webpage-link

my question is, was it designed only with react if they have done so, how do calculations work? after submitting the selected items move them to the cart.
can someone please explain this?

Tags:

2

Answers


  1. 0

    You can do something like that using formik

    export function ProductsList(props) {
    const [products, setProducts] = useState();

    const formik = useFormik({
        initialValues: {},
        onSubmit: (values) => {
            // implement add to cart logic here
            // values object will contain product id as keys and quantity as values
        }
    });

    useEffect(() => {
        const products = [] // here should be products loading logic
        
        setProducts(products);
    }, []);

    if (!products) return <Loading />

    return (
        <form id="products-form" onSubmit={formik.handleSubmit}>
            <div id="products-list">
                {products.map(product => (<div id={product.id}>
                    {/* product card description */}
                    <input name="quantity" type="number" onChange={(e) => formik.setFieldValue(product.id, e.target.value)} />
                </div>))}
            </div>
            <div id="submit-button">
                <button type="submit">Submit</button>
            </div>
        </form>
    )
}
    Login or Signup to reply.
  2. 0

    You can also use redux for data store, whenever you add an item in cart(Price or quantity).

    When you need to show of total so you calculate the price and quantity

    Example:- 5 quantity and 40 price
    Total = (5 * 40) = 200

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search