React-modal setstate not working

Question

export class StartContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false
        };

    }

    handleOpenModal = () => {
        console.log("Here")
        //this.setState({ showModal: true }, () =>{ console.log(this.state) });
        this.setState(() => {
            console.log("Changing state")
            return { showModal: true }
          });
    }

    handleCloseModal = () => {
        console.log(this.state.showModal)
        this.setState( );
    }


    render() {
        console.log(this.state)
        return (
            <div>
                <StartComponent handleModalOpen={this.handleOpenModal} />
                <ReactModal
                    isOpen={this.state.showModal}
                    contentLabel="Minimal Modal Example"
                >asda
                    <button onClick={this.handleCloseModal}>Close Modal</button>
                </ReactModal>
            </div>
        )
    }
}

So I am trying to integrate react-modal into my project.

The this.setState() method is not called I see no console log, neither when I pass a callback to the setState() methpd.

Can somebody help me please?

Thx for your time!

UPDATE -- Start component code.

export const StartComponent = (props) => (
<div className="start-page">
    <div className="container">
        <div className="row">
            <div className="col-sm-6">
                <NavLink to="/start/klarungsfalle">Einträge prüfen</NavLink>
            </div>
            <div className="col-sm-6" >
                <NavLink onClick={props.handleModalOpen} style={{ background: "#aac4d3", cursor: "default" }} to="/">Einträge verfügen</NavLink>
            </div>
        </div>
    </div>
</div>

);

Plus I have to mention that I am also using redux.

Answer 1

Your code seems to work for me. I just set up the <StartComponent /> and it looks like the state is being set how you want.

Try the following snippet which uses your code:

Alternatively you can check out this CodePen Demo.

const { HashRouter, NavLink } = ReactRouterDOM;

const App = () => (
  <HashRouter>
    <Modal />
  </HashRouter>
);

const StartComponent = ({currentState, handleModalOpen, handleNix}) => (
  <div className="start-page">
    <div className="container">
      <div className="row">
        <div className="col-sm-6">
          <NavLink to="/start/klarungsfalle" onClick={handleNix}>Einträge prüfen</NavLink>
        </div>
        <div className="col-sm-6">
          <NavLink
            onClick={handleModalOpen}
            style={{ background: "#aac4d3", cursor: "default" }}
            to="/"
            >
            Einträge verfügen
          </NavLink>
        </div>
      </div>
      <div className='row justify-center'>
        <div className='col-xs-12'>
          <div>
            <code>Modal</code> state
            <pre>{JSON.stringify(currentState)}</pre>
          </div>
        </div>
      </div>
    </div>
  </div>
);


class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  handleOpenModal = () => {
    console.log("Here");
    this.setState(() => {
      console.log(`Changing state to 'showModal: ${this.state.showModal}'`);
      return { showModal: true };
    });
  };
  
  handleNix = () => {
    alert("hier gibt's nichts");
  }

  handleCloseModal = () => {
    console.log(this.state.showModal);
    this.setState(() => {
      console.log(`Changing state to 'showModal: ${this.state.showModal}'`);
      return { showModal: false };
    });
  };

  render() {
    console.log(this.state);
    return (
      <div className="container">
        <StartComponent
          handleModalOpen={this.handleOpenModal}
          handleNix={this.handleNix}
          currentState={this.state}/>
        <ReactModal
          isOpen={this.state.showModal}
          contentLabel="Minimal Modal Example">
          <div className="flex columns-center">
            <div className="note">
              The modal hides the Stack Overflow console. Look behind the modal
              or open your JS console.
            </div>
            <div className="flex">
              <div>
                <code>Modal</code> state
                <pre>{JSON.stringify(this.state)}</pre>
              </div>
              <button
                className="btn btn-sm btn-danger"
                onClick={this.handleCloseModal}>
                Close Modal
              </button>
            </div>
          </div>
        </ReactModal>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.space-around {
  justify-content: space-around;
}

.columns-center {
  flex-direction: column;
  align-items: center;
}

.note {
  font-size: 0.7em;
  margin-bottom: 1rem;
}

.btn:after {
  content: "\01F436";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />

<div id="app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-modal/2.3.2/react-modal.min.js"></script>