How to retrieve state from a component - reactjs

Question

I have a Modal dialog component that takes another component as content and returns a promise for handling the result (Idea is from here). How can I extract the 'time' state from the content in order to add it to the promise chain?
import React from 'react'
import Modal from './Modal'
class Late extends React.Component {
constructor(props) {
super(props);
this.state = {
time: '18:48'
};
}
render() {
return (
<div className='modal-body'>
{this.time}
</div>
);
}
}
export default function(message, options) {
var form = <Late description={options.description} />;
return Modal(form, message, options).then(() => ??);
}
import React from 'react'
import ReactDOM from 'react-dom'
import '../css/modal.css'
import Promise from 'bluebird'
import _ from 'lodash'
Promise.config({ cancellation: true });
class Modal extends React.Component {
constructor(props) {
super(props);
this.resolve = null;
}
abort = () => this.promise.cancel();
confirm = () => this.resolve();
componentDidMount() {
this.promise = new Promise(resolve => this.resolve = resolve);
return ReactDOM.findDOMNode(this.refs.confirm).focus();
}
backdrop = () => <div className='modal-backdrop in' />;
modal() {
var style = {display: 'block'};
return (
<div
className='modal in'
tabIndex='-1'
role='dialog'
aria-hidden='false'
ref='modal'
style={style}
>
<div className='modal-dialog'>
<div className='modal-content'>
<div className='modal-header'>
<h4 className='modal-title'>
{this.props.message}
</h4>
</div>
{this.props.children}
<div className='modal-footer'>
<div className='text-right'>
<button type='button' className='btn btn-default' onClick={this.abort} >
{this.props.abortLabel}
</button>
{' '}
<button type='button' className='btn btn-primary' ref='confirm' onClick={this.confirm} >
{this.props.confirmLabel}
</button>
</div>
</div>
</div>
</div>
</div>);
}
render() {
return (
<div>
{this.backdrop()}
{this.modal()}
</div>
);
}
}
export default function(content, message, options) {
var cleanup, component, props, wrapper;
if (options == null) {
options = {};
}
props = _.assign({
message: message
}, options);
wrapper = document.body.appendChild(document.createElement('div'));
component = ReactDOM.render(<Modal {...props}>{content}</Modal>, wrapper);
cleanup = function() {
ReactDOM.unmountComponentAtNode(wrapper);
return setTimeout(function() {
return wrapper.remove();
});
};
return component.promise.finally(cleanup);
};

Answer 1

if i understood you correctly, you wish to make some action once the Modal is done(pressed OK i.e). If so ,than you could wrap the Modal with a component and pass a function as a prop to the Modal so that once the Modal component is handling the wished action it can omit the function from prop.
take a look how to pass a function as a prop, and Lift up the state