как сохранить вычисляемое поле в useState Reactjs

Question

У меня проблема в том, как сохранить или загрузить итоговое поле моего useState с вычислением цены * количество, я уже сохраняю в своем useState цену и количество, но я не могу сохранить итого.

вот мой код.

import React, {Fragment, useState} из 'response';

const DetailPurchase = (props) => {const [detail , setDetail] = useState ({цена: 0,00, количество: 0, всего: 0,00,});

const updateState = e => {
    setDetail({
        ...detail,
        [e.target.name] : e.target.value
    })
}

return(
    <Fragment>
                <div class="row justify-content-center">
                    <div class="col-12">
                        <form onSubmit={addDetail}
                        >
                           <div class="form-group">
                                <label>Price</label>
                                <input class="form-control"
                                        type="text"
                                        name="price"
                                        onChange={updateState}/>
                            </div>

                            <div class="form-group">
                                <label>Quantity</label>
                                <input class="form-control"
                                        type="text"
                                        name="quantity"
                                        onChange={updateState}/>
                            </div>

                            <div class="form-group">
                                <input class="btn btn-success btn-block " 
                                        type="submit"
                                        value="Add"

                                />
                            </div>
                        </form>
                    </div>
                </div>
    </Fragment>
)

}

Answer 1

Я бы посоветовал вычислить его после хука состояния, например,

const [detail, setDetail] = useState({price: 0, quantity: 0 });
const total = useMemo(() => detail.price * detail.quantity, [detail]);

Answer 2

Используйте formik https://formik.org/ Его лучше в формах и полях ввода, и вы можете изменить обработчики изменений