How to disable second form if first one is clicked

Question

I have two fields that show a modal when clicked on. I want to make one disabled if I select anyone first. I am using react-bootstrap for this project

  <>
        <div className='add-edit-product'>
            <div className='d-flex align-items-center justify-content-center error-info mb-3'>
                <img src={`../../../assets/img/about/${data.currencyHedge && data.marginFinancing ? "error-info-success.png" : "error-info.png"}`} className='me-3' />
                {data.currencyHedge && data.marginFinancing ?
                    <p className='success'>Risks are acceptable due to mitigants</p> :
                    <p className='error'>The below risks require your attention</p>
                }
            </div>

            <div className='form'>
                <h2 className='mb-3'>Exchange rate risk</h2>
                
                {data.currencyHedge && data.marginFinancing ? <p>No risk</p> :
                    <div>
                        {/*clicking on either of this tab will show a modal*/}
                        <div className='risk-tab' onClick={() => { setcurrencyHedgeModal(true); setSelected("currencyHedge") }}>
                            <h3>Enter a currency hedge</h3>
                            <img src={`../../../assets/img/about/${data.currencyHedge ? "correct-success.png" : "correct (1).png"}`} />
                        </div>
                        <div className='risk-tab' onClick={() => {setfinancingSufficientlyModal(true); setSelected("marginFinancing")}}>
                            <h3>Margin the financing sufficiently</h3>
                            <img src={`../../../assets/img/about/${data.marginFinancing ? "correct-success.png" : "correct (1).png"}`} />
                        </div>
                    </div>
                }
            </div>
        </div>
        <div className='footer_'>
            <button onClick={() => hendelCancel()} className="footer_cancel_btn">cancel</button>
            <button onClick={() => { nextStep() }} className='footer_next_btn'> Next</button>
        </div>
        {currencyHedgeModal && <CurrencyHedgeModal show={currencyHedgeModal} onHide={() => setcurrencyHedgeModal(false)} getModalData={(e) => modalGetData(e)} type={selected} />}
        {financingSufficientlyModal && <FinancingSufficientlyModal show={financingSufficientlyModal} onHide={() => setfinancingSufficientlyModal(false)} getModalData={(e) => setData({ ...data, marginFinancing: e })} />}
    </>

how can I add the logic to disable the next field if anyone is selected first. the image below is the form. (the green check mark shows when each form is filled and saved)

Answer 1

Question answer 1

1. Yes, if you want both inputs to trigger the opening of the modals you have to set onClick prop on both.
2. This depends on implementation and what do you specifically mean by disable an input. There are a couple of possible scenarios:

• 2.1 You may add a disabled class like so:

className={`${isOpened ? "disabled" : ""}`}

and then write some css.

• 2.2 You might rewrite onClick to just return when the modal is already opened instead of opening the second modal like so:

onClick={() => {
    if (isOpened) return 
    setOpened(true)
}

P.S. You may need to add a second boolean flag to your state if you want this behaviour on both modals / inputs

Original answer

You have to use useState hook with a boolean flag isOpened

const [isOpened, setOpened] = useState(false)

Then update the state when clicking on yout input field

onClick={() => setOpened(true)}

Finally in your input fields you can use isOpened to disable them however you want, using styles or other logic.

P.S. Don't forget to call setOpened(false) when closig your modal