Error datePicker

Buenos Dias David,

Please submit support request in the Support Board number one language - English. Translating issues should be easier and quicker on your end. Thanks.

With Best Regards,
Kuba

Element ref was specified as a string (input) but no owner was set. This could happen for one of the following reasons: 1. You may be adding a ref to a functional component 2. You may be adding a ref to a component that was not created inside a component's render method 3. You have multiple copies of React loaded See https://fb.me/react-refs-must-have-owner for more information.

See https://fb.me/react-refs-must-have-owner for more information.
at invariant (invariant.js:42)
at coerceRef (react-dom.development.js:11886)
at createChild (react-dom.development.js:12091)
at reconcileChildrenArray (react-dom.development.js:12341)
at reconcileChildFibers (react-dom.development.js:12655)
at reconcileChildrenAtExpirationTime (react-dom.development.js:13015)
at reconcileChildren (react-dom.development.js:13006)
at updateHostComponent (react-dom.development.js:13340)
at beginWork (react-dom.development.js:13828)
at performUnitOfWork (react-dom.development.js:15863)
at workLoop (react-dom.development.js:15902)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at invokeGuardedCallback (react-dom.development.js:187)
at replayUnitOfWork (react-dom.development.js:15310)
at renderRoot (react-dom.development.js:15962)
at performWorkOnRoot (react-dom.development.js:16560)
at performWork (react-dom.development.js:16482)
at performSyncWork (react-dom.development.js:16454)
at requestWork (react-dom.development.js:16354)
at scheduleWork$1 (react-dom.development.js:16218)

Thank you very much for your attention.

import React from 'react';
import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import DatePicker from 'material-ui/DatePicker';
class ModalPage extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<Container>
<h4 className="mt-4">Basic example</h4>
<Button color="danger" onClick={this.toggle} >Modal</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
<MuiThemeProvider>
<div className="datepicker-wrapper">
<DatePicker style={{borderBottom: '1px solid #bdbdbd', height: '3rem'}} id="datepicker" textFieldStyle={{width: '100%'}} hintText="Selected date" ></DatePicker>
</div>
</MuiThemeProvider>
</ModalBody>
<ModalFooter>
<Button color="secondary" onClick={this.toggle}>Close</Button>{' '}
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
</Container>
);
}
}
export default ModalPage;

×

←→1 of 2 errors on the page

Element ref was specified as a string (input) but no owner was set. This could happen for one of the following reasons: 1. You may be adding a ref to a functional component 2. You may be adding a ref to a component that was not created inside a component's render method 3. You have multiple copies of React loaded See https://fb.me/react-refs-must-have-owner for more information.

▶ 29 stack frames were collapsed.

  16229 | }, {
  16230 |   key: 'renderIntoSubtree',
  16231 |   value: function renderIntoSubtree() {
> 16232 |     _reactDom2.default.unstable_renderSubtreeIntoContainer(this, this.renderChildren(), this._element);
  16233 | 
  16234 |     // check if modal should receive focus
  16235 |     if (this._focus) {

View compiled

Modal.show

D:/GitPro/re-pro/dist/mdbreact.js:16205

  16202 | 
  16203 |     document.body.className = (0, _utils.mapToCssModules)((0, _classnames2.default)(classes, 'modal-open'), this.props.cssModule);
  16204 | 
> 16205 |     this.renderIntoSubtree();
  16206 |   }
  16207 | }, {
  16208 |   key: 'renderModalDialog',

import React, { Component } from 'react';

import Modal from './ModalPage';

class App extends Component {

constructor(props) {

super(props);

this.state= {

}

}

render() {

return (

<divclassName="App">

<Modal></Modal>

</div>

);

}

}

export default App;

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import 'font-awesome/css/font-awesome.min.css';

import 'bootstrap/dist/css/bootstrap.min.css';

import 'mdbreact/dist/css/mdb.css';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';

import { Container, Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import DatePicker from 'material-ui/DatePicker';

class ModalPage extends React.Component {

constructor(props) {

super(props);

this.state= {

modal:false

};

this.toggle=this.toggle.bind(this);

}

toggle() {

this.setState({

modal:!this.state.modal

});

}

render() {

return (

<Container>

<h4className="mt-4">Basic example</h4>

<Buttoncolor="danger"onClick={this.toggle}>Modal</Button>

<ModalisOpen={this.state.modal}toggle={this.toggle}>

<ModalHeadertoggle={this.toggle}>Modal title</ModalHeader>

<ModalBody>

<MuiThemeProvider>

<divclassName="datepicker-wrapper">

<DatePickerstyle={{ borderBottom:'1px solid #bdbdbd', height:'3rem' }}id="datepicker"textFieldStyle={{ width:'100%' }}hintText="Selected date"></DatePicker>

</div>

</MuiThemeProvider>

</ModalBody>

<ModalFooter>

<Buttoncolor="secondary"onClick={this.toggle}>Close</Button>{' '}

<Buttoncolor="primary">Save changes</Button>

</ModalFooter>

</Modal>

</Container>

);

}

}

export default ModalPage;

<DatePicker style={{ borderBottom:'1px solid #bdbdbd', height:'3rem' }}i d="datepicker" textFieldStyle={{ width:'100%' }} hintText="Selected date"></DatePicker>