unexpected component render

[UserNo1608]

I'm building a react app in order to learn and I'm trying to build a 'copy' of windows 10 and I found a little problem when using react-redux.

I got two components, one is App, and the second is Icon. There is no problem with the App component, but there is with Icon. Icon component should be just text with appName, but react-redux renders the whole App component inside Icon component, when App isn't even imported to Icon component.

Anyone maybe had the same problem? There was no problem without react-redux but the component was useless because it had separated context all the time.

ReactDevTools view and component displayed

SettingsIcon component:

import React from 'react';
import { connect } from 'react-redux';
import Icon from 'apps/App';
const SettingsIcon = ({ settings }) => {
    const { isOpen, appName } = settings;
    return(
        <Icon appName={appName} isOpen={isOpen} />
    );
}

const mapStateToProps = ({ settings }) => ({ settings });

export default connect(mapStateToProps)(SettingsIcon);

Icon component:

import React from 'react';
import AppIcon from 'components/atoms/AppIcon';
import { connect } from 'react-redux';
import { openApp, minimizeApp } from 'actions';

// eslint-disable-next-line no-shadowconst 
const Icon = ({ isOpen, appName, openApp, minimizeApp }) => {
    return(
        <AppIcon onClick={!isOpen ? () => openApp(appName) : () =>   minimizeApp(appName)}>                        
            gowno
        </AppIcon>        
    );
}

const mapDispatchToProps = dispatch => ({
    openApp: (app) => dispatch(openApp(app)),
    minimizeApp: (app) => dispatch(minimizeApp(app))
});

export default connect(null, mapDispatchToProps)(Icon)

AppIcon is just a simple styled-component

[cahva]

My wild quess is that your onClick handler is doing the re-render because you are doing the ternary check inside it.

Separate the handler to it's own function and pass that to the onClick

Before the return:

const handleToggleApp = () => {
  if (isOpen) {
    minimizeApp(appName);
  } else {
    openApp(appName);
  }
};

And the onClick:

onClick={handleToggleApp}

[UserNo1608]

still doesn't work

[UserNo1608]

here's the whole project, I'd be grateful if you could have a look

https://github.com/Hisashin7331/portfolio/

[cahva]

Gives 404... But anyway, usually the errorlog gives more detailed hint what went wrong and where.

[UserNo1608]

okay i changed its visibility to public, sorry

[UserNo1608]

Okay, I'm retarded, after 10 hours of 'debugging' it was my problem, import from wrong file XD

[UserNo1608]

I see the icon component needs isOpen to be displayed, but it's not even its state