im trying to make checkout page using react, i want to use useState to handle quantity, but useState can't be declared outside react functional component, i have declared usestate in the component, but it replacing all the checkout item quantity which i dont want, how can i solve this?

Error msg : React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

sorry if my english is bad

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./Checkout.css";

const Checkout = (props) => {
    const [item, setItem] = useState([]);
    // const [cartComplete, setCartComplete] = useState(false);

    useEffect(() => {
        for (let i = 0; i < props.cart.length; i  ) {
            axios
                .get(`http://${process.env.REACT_APP_BASE_URL}:3100/user/cart/${props.cart[i]}`)
                .then((res) => {
                    setItem((prevState) => [...prevState, res.data]);
                    // if (i === props.cart.length - 1) {
                    //     setCartComplete(true);
                    // } else {
                    //     setCartComplete(false);
                    // }
                })
                .catch((err) => console.log(err));
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <div className="checkout-container">
            <h1>Checkout</h1>
            <div className="checkout-items">
                {item.map((item, index) => {
                    const [quantity, setQuantity] = useState(1);
                    const [harga, setHarga] = useState(parseInt(item[0].harga_barang) * quantity)
                    return (
                        <div className="checkout-item" key={index}>
                            <div className="checkout-item-img">
                                <img
                                    src={`http://${process.env.REACT_APP_BASE_URL}:3100/${item[0].foto_barang}`}
                                    alt={item[0].nama_barang}
                                />
                            </div>
                            <div className="checkout-item-info">
                                <h3>{item[0].nama_barang}</h3>
                                <p>{item[0].harga_barang}</p>
                                <input
                                    type="number"
                                    name="quantity"
                                    id="quantity"
                                    min="1"
                                    value={quantity}
                                    onChange={(e) => {
                                        setQuantity(e.target.value);
                                        setHarga(parseInt(item[0].harga_barang) * quantity)
                                    }}
                                    required
                                />
                                <p>Total : Rp. {harga}</p>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default Checkout;

CodePudding user response：

The way you can do this is assigning different counters for each index of item

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./Checkout.css";

const Checkout = (props) => {
    const [item, setItem] = useState([]);
    // const [cartComplete, setCartComplete] = useState(false);
    let [quantity, setQuantity] = useState({});

    useEffect(() => {
        for (let i = 0; i < props.cart.length; i  ) {
            axios
                .get(`http://${process.env.REACT_APP_BASE_URL}:3100/user/cart/${props.cart[i]}`)
                .then((res) => {
                    setItem((prevState) => [...prevState, res.data]);
                    // if (i === props.cart.length - 1) {
                    //     setCartComplete(true);
                    // } else {
                    //     setCartComplete(false);
                    // }
                })
                .catch((err) => console.log(err));
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    return (
        <div className="checkout-container">
            <h1>Checkout</h1>
            <div className="checkout-items">
                {item.map((item, index) => {
                    

                    return (
                        <div className="checkout-item" key={index}>
                            <div className="checkout-item-img">
                                <img
                                    src={`http://${process.env.REACT_APP_BASE_URL}:3100/${item[0].foto_barang}`}
                                    alt={item[0].nama_barang}
                                />
                            </div>
                            <div className="checkout-item-info">
                                <h3>{item[0].nama_barang}</h3>
                                <p>{item[0].harga_barang}</p>
                                <input
                                    type="number"
                                    name="quantity"
                                    id="quantity"
                                    min="1"
                                    value={quantity[index]}
                                    onChange={(e) => {
                                        setQuantity((prevState) => {
                                            return {
                                                ...prevState,
                                                [index]: e.target.value,
                                            };
                                        });
                                    }}
                                    required
                                />
                                <p>Total : Rp. {harga}</p>
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
};

export default Checkout;