Nsryjdtyk

Don't know why when i click to open the modal the main screen goes down as the modal goes on top of it:

https://github.com/RodPin/Modal-with-Redux

I've gone ahead and refactored your application. You have a lot of mistakes that are holding your application back.

Working example: https://codesandbox.io/s/xj553k7nno

Please read the following notes carefully:

• Use the npm package react-redux (documentation) for connecting and dispatching to redux
  


• Separate your containers from your components: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
  


• When using prop-types, I'd recommend defining propTypes outside of your class (I prefer it out of the class or function and before or after the export). See this for more details.


• Create actions that manipulate Redux's state and create types that handle what state to manipulate.


• Common convention for Redux actions is to return a type and payload (although sometimes a payload may not be necessary) and for all reducers to expect that type and payload from the action.


• Use switch statements instead of nested if and else statements for your reducers.


• When importing please follow this order:
  
  
  
  
  • 1.) Node Modules
  
  
  • 2.) Components/Containers/Actions/Reducers/Helper functions
  
  
  • 3.) Stylesheets
  
  
  
  


• Do not nest invalid HTML elements: <p><div/></p> (div can not appear as a child of p)


• Do not use vague prop names: close, open, ...etc. Instead be more declarative: closeModal, openModal, ...etc.


• Do not use underscores _ as this is not a common JavaScript naming convention


• Reduce repetitive code with reusable components (for example: ModalColor)!


• In this example, React state is not needed to update Redux's state. Redux can control its own state via the actions and reducers.


• Use <Fragment></Fragment> or <></> when you need to encapsulate JSX elements that don't need a containing HTML element.


• 
  

  Simplify your application structure:

  
  
  

   ├── 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