React Modal powoduje, że strona się wyłącza

Przeprowadziłem refaktoryzację Twojej aplikacji. Masz wiele błędów, które wstrzymują Twoją aplikację.

Przykład pracy: https://codesandbox.io/s/xj553k7nno

Proszę uważnie przeczytać następujące uwagi:

• Użyj pakietu npm react-redux (dokumentacji) do połączenia i wysyłka do redux
• Oddziel swój containers od components: https: //medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
• Korzystając z prop-types, polecam zdefiniowanie propTypes poza klasą (wolę to z class lub function i przed lub po export ). Zobacz to, aby uzyskać więcej szczegółów.
• Utwórz actions, które manipulują state Redux i stwórz types, które obsługują to, co state do manipulowania.
• Powszechną konwencją dla Redux actions jest return type i payload (chociaż czasami payload może nie być konieczne) i dla wszystkich reducers oczekiwać, że type i payload z akcji.
• Użyj instrukcji switch zamiast zagnieżdżonych instrukcji if i else dla reducers.
• Podczas importskorzystaj z następującej kolejności:
  • 1.) Moduły węzłów
  • 2.) Komponenty/Kontenery/Akcje/Reduktory/Funkcje pomocnicze
  • 3.) Arkusze stylów
• Nie zagnieżdżaj nieprawidłowych elementów HTML: <p><div/></p> (div nie może pojawić się jako child z p)
• Nie używaj niejasnych nazw rekwizytów: close, open, ...itd. Zamiast tego bądź bardziej deklaratywny: closeModal, openModal, ...itd.
• Nie używaj podkreśleń _, ponieważ nie jest to powszechna konwencja nazewnictwa JavaScript
• Zredukuj powtarzalny kod dzięki komponentom wielokrotnego użytku (na przykład: ModalColor)!
• W tym przykładzie React state nie jest potrzebny do aktualizacji state Reduxa. Redux może kontrolować własne state za pośrednictwem actions i reducers.
• Użyj <Fragment></Fragment> lub <></>, gdy musisz zahermetyzować elementy JSX, które nie wymagają zawierającego elementu HTML.

• Uprość strukturę swojej aplikacji:

   ├── build
   |   ├── css
   |   |   ├── main.[contenthash:8].css
   |   |   └── main.[contenthash:8].css.map
   |   ├── js
   |   |   ├── main.[hash].js
   |   |   └── main.[hash].js.map
   |   ├── media
   |   |   └── [hash].[ext]
   |   └── favicon.ico
   |   └── index.html
   |
   ├── public
   |   ├── favicon.ico
   |   └── index.html
   |
   ├── src
   |   ├── actions
   |   ├── components
   |   ├── containers
   |   ├── images
   |   ├── reducers
   |   ├── routes
   |   ├── store
   |   ├── styles (global)
   |   ├── tests
   |   ├── types
   |   ├── utils
   |   ├── index.js
   |   ├── serviceWorker.js
   |   └── setupTests.js
   |
   ├── .gitignore
   ├── README.md
   ├── package.lock.json
   └── package.json