👨‍💻 Организация модальных окон Большая радость, если в проекте модальное окно является единственным компонентом, но как правило этот компонент является переиспользуемым. На примере можно обратить внимание, что у модальных окон как правило есть: заголовок, контент внутри body, кнопки закрыть и сохранить. Это общая структура, которая может относиться ко всем модальным окнам.

Сначала организуем общее модальное окно index.js внутри компонента modals.

`// импорты зависимостей и других компонентов

const modals = { adding: NewChannel, renaming: RenameChannel, removing: DeleteChannel, };

const ModalContainer = () => { const { t } = useTranslation(); const dispatch = useDispatch(); const currentChannelId = useSelector((state) => state.app.currentChannelId); const modalChannelId = useSelector((state) => state.app.modalChannelId); const { data: channels = [] } = useGetChannelsQuery(); const channelsNames = channels.map((channel) => channel.name); const channelNameSchema = Yup.object().shape({ channelName: Yup.string().notOneOf(channelsNames, t('form.errors.channelExists')).min(3, t('form.errors.range')).max(20, t('form.errors.range')) .required(t('form.errors.required')), }); const handleCloseModal = () => { dispatch(setChannelModal({ id: '', name: '', modalName: '' })); }; const showModal = useSelector((state) => state.app.showModal); const ModalComponent = modals[showModal]; if (!ModalComponent) { return null; } return (

); };

export default ModalContainer;

Далее создается «дочерний» компонент NewChannel.jsx и мы через пропсы, бросаем нужные события, избавляясь от повторения кода в двух компонентах.

`const NewChannel = (props) => { const { handleCloseModal, showModal, dispatch, t, channelNameSchema, } = props; const [addChannel] = useAddChannelMutation(); // прочий код, который только нужен для создания нового канала }

Мы можем бросать не только данные, но и компоненты. Поскольку в примере использовалось модальное окно бутстрапа, то нам не было необходимости еще отдельно организовывать UI для компонента.

Рекомендация. Создайте модальное окно в одном файле, полностью определив в нем весь html и js. Подумайте, какие участки кода, могут быть переиспользуемые? Организуйте для них отдельный файл index.js и через пропсы бросайте в другие дочерние компоненты.``