Rendering a component using React Router and Redux crashing

Question

I had a React app, which started to get out of hand, so I decided to go for React-Redux. It kind of went well, until I hit a weird error. It goes:

TypeError: this is undefined

And this wouldn't be nothing impressive, if it was not thrown in the React-Redux library. Like so:

PureComponent
node_modules/react/cjs/react.development.js:412

  409 |  */
  410 | 
  411 | function PureComponent(props, context, updater) {
> 412 |   this.props = props;
  413 | ^  this.context = context; // If a component has string refs, we will assign a different object later.
  414 | 
  415 |   this.refs = emptyObject;

The console says:

The above error occurred in one of your React components:
    in Unknown (created by Context.Consumer)
    in Connect(Component) (at RegisterFormUI.jsx:32)
    in form (at RegisterFormUI.jsx:21)
    in div (at RegisterFormUI.jsx:18)
    in div (at RegisterFormUI.jsx:15)
    in div (at RegisterFormUI.jsx:14)
    in div (at RegisterFormUI.jsx:13)
    in Unknown (created by Context.Consumer)
    in Connect(Component) (created by Route)
    in Route (at SharedPaths.jsx:18)
    in Switch (at NavigationUI.jsx:98)
    in Router (created by BrowserRouter)
    in BrowserRouter (at NavigationUI.jsx:65)
    in Unknown (created by Context.Consumer)
    in Connect(Component) (at App.js:50)
    in div (at App.js:49)
    in App (at src/index.js:15)
    in Provider (at src/index.js:14)

which makes no sense, because I don't have a Connect method called in my RegisterFormUI component. I have no idea what I messed up. Here's my UI of the form:

export default ({user = {}}) => {
    return <BrowserRouter>
        <React.Fragment>
            <Navbar className='navbar_all'>
                <Navbar.Header>
                    <Navbar.Brand>
                        <LinkContainer className='navbar_brand' id='home' to='/'>
                            <NavItem>
                                <img alt='ZdajTo' src="assets/images/new_logo.png" style={{height: '30px'}}/>
                            </NavItem>
                        </LinkContainer>
                    </Navbar.Brand>
                </Navbar.Header>
                <Nav className='float_right'>
                    <LinkContainer to='/homepage' style={{textDecoration: 'none'}}>
                        <NavItem>
                            <button style={{
                                backgroundColor: '#F16049',
                                border: '4px solid #F16049',
                                borderRadius: '4px',
                                padding: '10px',
                                marginBottom: '5px',
                                color: '#fff'
                            }}>
                                DLA ROZWIĄZUJĄCYCH
                            </button>
                        </NavItem>
                    </LinkContainer>
                </Nav>
                <Nav className='float_right'>
                    <SharedNavBar user={user.userAcc}/>
                    {renderNavBar(user)}
                </Nav>
            </Navbar>
            <Switch>
                {renderPaths(user) ? renderPaths(user).map(path => path) : null}
                {SharedPaths.map(path => path)}
            </Switch>
        </React.Fragment>
    </BrowserRouter>
};

And my container is this:

import {connect} from 'react-redux';
import UI from '../../ui/studentRegistrationUI/RegisterFormUI'
import {beginRegistration} from "../../../../actions";

const mapStateToProps = state => ({user: state.user});

const mapDispatchToProps = dispatch => ({
    handleClick() {
        dispatch(
            beginRegistration('student')
        )
    }
});
export default connect(mapStateToProps, mapDispatchToProps)(UI)

Any idea what I messed up?

Answer 1

There was a problem with one of my children components. Mainly I tried to do this:

{CheckBox('Regulations', '/assets/regulamin.pdf', 'regulamin')}

And I should've done this:

<CheckBox id={'Regulations'} path={'/assets/regulamin.pdf'} text={'regulamin'}/>

And here's the container for future reference:

import {connect} from 'react-redux';
import UI from '../../../ui/studentRegistrationUI/components/CheckBoxUI'

const mapStateToProps = (state, props) => ({user: state.user, id: props.id, path: props.path, text: props.text});

export default connect(mapStateToProps)(UI)