whoisearth whoisearth - 1 year ago 186
React JSX Question

Uncaught TypeError: Cannot read property 'showModal' of null

I'm attempting to take the following code here and refactor the login into a modal. Unfortunately when clicking

I get the following error:

Uncaught TypeError: Cannot read property 'showModal' of null

Here is my Navigation.js

import React, { Component, PropTypes } from 'react';
import { Button, Modal, Nav, Navbar } from 'react-bootstrap';
import { IndexLinkContainer } from 'react-router-bootstrap';
import Login from '../Login/Login';
import Logout from '../Logout/Logout';
import { loginUser, logoutUser } from '../../actions/actions'
import './Navigation.css'

export default class Navigation extends Component {

constructor(props, context) {
super(props, context);

this.state = {
showModal: false

open() {
this.showModal.setState = true

close() {
this.showModal.setState = false

render() {

const { dispatch, isAuthenticated, errorMessage } = this.props;

return (
<Navbar className="navbar navbar-default navbar-fixed-top">
<IndexLinkContainer to="/"><a href="/">myApp</a></IndexLinkContainer>
<Navbar.Toggle />
<Nav pullRight>

{!isAuthenticated &&
<Button bsStyle="primary" onClick={this.open}>Login</Button>

{isAuthenticated &&
<Logout onLogoutClick={() => dispatch(logoutUser())} />


<Modal show={this.state.showModal} onHide={this.close}>
<Modal.Header closeButton>
onLoginClick={ creds => dispatch(loginUser(creds)) }


Navigation.propTypes = {
dispatch: PropTypes.func.isRequired,
isAuthenticated: PropTypes.bool.isRequired,
errorMessage: PropTypes.string,

The page loads fine but my modal isn't launching from clicking the button. I'm using react and react-bootstrap.

Answer Source

Right so you have several bugs in your code:

When using an ES6 class as you are doing here, your methods do not autobind meaning that if you have an event handler on your JSX like this.open, then this is the wrong context therefore anything you do in the function will not be able to use this. To fix, bind somewhere, preferably in the constructor but can be done inline:


Second issue is that the function itself is doing something kind of random. Of course this.showModal throws an error because of the binding issue mentioned above, but even with the binding, that is not how you access/set state variables. Instead, switch to:

this.setState({ showModal: true }) // or false for `close`

It should then start working properly.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download