When discount_in_ruppes changes, I need to update discount_in_percentage and vice versa. How is this possible in ReactJS?

     const Demo = () => {
     const total = 500
     const [state, setState] = useState({
        discount_in_ruppes: 0,
        discount_in_percentage: 0,
     })

     const {discount_in_ruppes, discount_in_percentage} = state;

     useEffect(() =>{
         updateState({
             discount_in_percentage: discount_in_ruppes/total * 100
         })
     }, [discount_in_ruppes])

     useEffect(() =>{
         updateState({
             discount_in_ruppes: discount_in_ruppes/100 * total
         })
     }, [discount_in_percentage])

     const updateState = (keyValuePairs) => {
        setState({
            ...state,
            ...keyValuePairs,
        })
     }

     reutrn(
            <div className="row">
                <p>Do you want to give any discounts?</p>
                <div className={`form-group col-6`}>
                    <label>Discount in Ruppees</label>
                    <input
                        type="number"
                        id="modalDiscountInput"
                        className="form-control"
                        placeholder="Discount in Rupees"
                        value={discount_in_ruppes}
                        onChange={(e) => {
                            updateState({
                                discount_in_ruppes: e.target.value,
                            })
                        }}
                    />
                </div>
                <div className="form-group col-6">
                    <label>Discount in Percentage</label>
                    <input
                        type="number"
                        id="modalDiscountPercentageInput"
                        className="form-control"
                        placeholder="Discount in Percentage"
                        value={discount_in_percentage}
                        onChange={(e) => {
                            updateState({
                                discount_in_percentage: e.target.value,
                            })
                        }}
                    />
                </div>
            </div>);
    }

CodePudding user response：

Use two separate states, as is recommended in functional components, both to make the code easier and to avoid endless recursion.

const Demo = () => {
    const total = 500
    const [rupDiscount, setRupDiscount] = React.useState(0);
    const [percDiscount, setPercDiscount] = React.useState(0);
    React.useEffect(() => {
        setPercDiscount(rupDiscount / total * 100);
    }, [rupDiscount])

    React.useEffect(() => {
        setRupDiscount(percDiscount / 100 * total);
    }, [percDiscount])
    return (
        <div className="row">
            <p>Do you want to give any discounts?</p>
            <div className={`form-group col-6`}>
                <label>Discount in Ruppees</label>
                <input
                    type="number"
                    id="modalDiscountInput"
                    className="form-control"
                    placeholder="Discount in Rupees"
                    value={rupDiscount}
                    onChange={(e) => setRupDiscount(e.target.value)}
                />
            </div>
            <div className="form-group col-6">
                <label>Discount in Percentage</label>
                <input
                    type="number"
                    id="modalDiscountPercentageInput"
                    className="form-control"
                    placeholder="Discount in Percentage"
                    value={percDiscount}
                    onChange={(e) => setPercDiscount(e.target.value)}
                />
            </div>
        </div>);
}

ReactDOM.render(<Demo />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>