Как управиться с пару modal-окнами на странице?

Question

[dotnetlooper]

На странице должны работать два модальных окна: одна - для создание новых данных; вторая - подтверждение для удаления какой-то записи.

Проблема - при вызове удаления записи => сплывает окно с созданием новых даных

function Modal({ title, display, close, children }) {
    if(!display) {
        return null;
    }

    return (
        <div className="modal" onClick={ close }>
            <div className="content" onClick={event => event.stopPropagation()}>
                <div className="header">
                    <h4 className="title">{ title }</h4>
                    <button className="button" onClick={ close }>Close</button>
                </div>

                <div className="body">{ children }</div>
            </div>
        </div>
    )
}

Как мне каждый из них вызывать в свою очередь? Что в первом случае, что во втором, вызываю так:
onClick={() => setModal(true)

Comments

[dotnetlooper]

неужели создать два useState состояния на каждый ивент?о_О Должен же быть другой способ ?)

Answer 1

[0xD34F]

Вместо логического значения пусть будет идентификатор окна, которое надо открыть:

<button onClick={() => setModal('раз окно')}>1</button>
<button onClick={() => setModal('два окно')}>2</button>
<button onClick={() => setModal('три окно')}>3</button>
...
<Modal display={modal === 'раз окно'}>...</Modal>
<Modal display={modal === 'два окно'}>...</Modal>
<Modal display={modal === 'три окно'}>...</Modal>

Answer 2

[ParaBellum577]

А почему вы не сделаете для каждой модалки свой стейт?

const [modalFirst, setModalFirst] = useState(false); 
const [modalSecond setModalSecond] = useState(false);

Comments

[dotnetlooper]

мне кажется, что такой подход не совсем правильный. это же практически, как дублирование кода. Возможно, вы правы.

[ParaBellum577]

dotnetlooper, я бы не назвал такие вещи дублированием кода, это просто разделение состояний. И это проще читается, чем если вы будете хранить в стейте какие-то ключи, которые потом будете перебирать в условиях и проверять какая-же модалка сейчас открыта. Если у вас будет 10 таких модалок на странице - тогда соглашусь, лучше сделать один стейст с ключом для всех окон.