Rebass modal not showing when state is changed. Why is it not passing true?

Question

The modal is not showing even though I passed a boolean of true attribute to function. It seems that SuccessModal turns true but Overlay does not. How come it's not working?

import React, {PropTypes} from 'react';
import {
  Overlay,
  Panel,
  PanelHeader,
  PanelFooter,
  Button,
  Text,
  //Close,
  Space
} from 'rebass';

function SuccessModal ({modalOpen}) {

    return (
    <Overlay
      open={modalOpen}
    >
      <Panel theme="success">
        <PanelHeader>
          Wicckkkeedd!
          <Space auto />
        />
        </PanelHeader>
        <img
          src='http://lorempixel.com/512/384/cats'
          style={{
              maxWidth: '100%',
              height: 'auto'
          }} />
        <Text>
          <b>Panel:</b> Something laid as a covering something else
        </Text>
        <PanelFooter>
          <Space auto />
          <Button
            theme='success'
            children='Meow!' 
          />
        </PanelFooter>
      </Panel>
    </Overlay>
  );
}


export default SuccessModal;

If you need more code to debug please let me know! Thanks in advance.

Answer 1

This works by accessing props children.

import React, {PropTypes} from 'react'; import { Overlay, Panel, PanelHeader, PanelFooter, Button, Text, //Close, Space } from 'rebass';

function SuccessModal ({modalOpen}) {

    return (
    <Overlay
      open={modalOpen.open}
    >
      <Panel theme="success">
        <PanelHeader>
          Wicckkkeedd!
          <Space auto />
        />
        </PanelHeader>
        <img
          src='http://lorempixel.com/512/384/cats'
          style={{
              maxWidth: '100%',
              height: 'auto'
          }} />
        <Text>
          <b>Panel:</b> Something laid as a covering something else
        </Text>
        <PanelFooter>
          <Space auto />
          <Button
            theme='success'
            children='Meow!' 
          />
        </PanelFooter>
      </Panel>
    </Overlay>
  );
}


export default SuccessModal;