Error datePicker

Topic: Error datePicker

master@mastersistemas.net pro asked 6 years ago

Good morning, I'm having a problem using DatePicker.

When I use inside a modal it presents this error,

however, out of the modal works perfectly

React Version: "16.4.1",

Invariant.js: 42 Uncaught Error: The ref element was specified as a string, but was never defined. This can happen for one of the following reasons: 1. You may be adding one or a functional 2. You may be adding a component that was not created within the rendering method of a component 3. You have multiple copies of React loaded

My code:

index.js

importar Reagir de 'reagir';
importar o ReactDOM de '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';
importar App de './App';
import registerServiceWorker de './registerServiceWorker';
ReactDOM.render (<App />, document.getElementById ('root'));
registerServiceWorker ();


Modal.js

importar Reagir de 'reagir';
import {Contêiner, Botão, Modal, ModalBody, ModalHeader, ModalFooter} de 'mdbreact';
import SelectDate de './DatePicker';
class myModal extends React.Component {
construtor (props) {
super (adereços);
this.state = {
modal: verdadeiro
};
this.toggle = this.toggle.bind (isso);
}
alternancia() {
this.setState ({
modal:! this.state.modal
});
}
render () {
Retorna (
<Contêiner>
<ModalisOpen = {this.state.modal} toggle = {this.toggle}>
<ModalHeadertoggle = {this.toggle}> título do Modal </ ModalHeader>
<ModalBody>
<SelectDate> </ SelectDate>
</ ModalBody>
<ModalFooter>
</ ModalFooter>
</ Modal>
</ Container>
);
}
}
exportação padrão myModal;

DatePicker.js

importar Reagir de 'reagir';
import MuiThemeProvider de 'material-ui / styles / MuiThemeProvider';
import DatePicker de 'material-ui / DatePicker';
classe SelectDate estende React.Component {
componentDidMount () {
letdatePickerHr = document.querySelector ('. datepicker-wrapper'). getElementsByTagName ('hr') [0];
datePickerHr.style.border = "nenhum";
}
render () {
Retorna (
<divclassName = "contêiner mt-5">
<divclassName = "md-form">
<MuiThemeProvider>
<divclassName = "datepicker-wrapper">
<DatePickerstyle = {{borderBottom: '1px solid #bdbdbd', altura: '3rem'}} id = "datepicker" textFieldStyle = {{largura: '100%'}} hintText = "Data selecionada"> </ DatePicker>
</ div>
</ MuiThemeProvider>
</ div>
</ div>
);
}
};
exportar SelectDate padrão;

App.js

import React, {Component} from 'react';
import './App.css';
import {Button} de 'mdbreact';
import Modal de './Modal.js';
class App estende o componente {
construtor (props) {
super (adereços);
this.state = {
modal: true
};
}
abrir = () => {
this.setState ({modal: true})
console.log ("estado")
}
render () {
Retorna (
<divclassName = "App">
<divclassName = "md-form">
<Modal
modal = {this.state.modal}
> </ Modal>
</ div>
<ButtononClick = {this.abrir}> Abrir o Modal </ Button>
</ div>
);
}
}
exportar App padrão;

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hello,

we did some updates and that could cause the problem with integration.
I recommend you to do what follows:
1. remove "mdbreact" from dependencies in package.json
2. run yarn or yarn install in console
3. bring back "mdbreact" into package.json -> dependencies
4. run yarn or yarn install
5. yarn start

I hope the bug will be fixed then.
Don`'t hesitate to contact with us if problem still accurs.

Here is better tutorial on how to install mdb pro if needed:
https://mdbootstrap.com/react/5-min-quick-start/
(look into install via Yarn / NPM, tuck PRO).

Best regards,
Jakub from MDB

master@mastersistemas.net pro commented 6 years ago

Thank you very much, it's working perfectly. But now a visual bug has appeared. https://ibb.co/cmAauJ I'm looking for a way to solve it, but if you have any idea it's welcome.

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

I see some unnecessary code which does that ugly effect:

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

Remove style borderBottom - that will fix the problem :) Regards, Jakub from MDB

Add comment

master@mastersistemas.net pro answered 6 years ago

0 0 Best answer

Good morning Mikołajm, thank you for your attention. But the same mistake happened.
<pre><span title="Click or press Escape to dismiss.">×</span>

<button>←</button><button>→</button>1 of 2 errors on the page</pre>
<div>
<pre>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.</pre>
<div>
<pre><button>▶ 29 stack frames were collapsed.</button>

</pre>
<div>Modal.renderIntoSubtree</div>
<div><a rel="nofollow">D:/GitPro/re-pro/dist/mdbreact.js:16232</a></div>
<pre><code><span>  16229 | }, {</span>
<span>  16230 |   key: 'renderIntoSubtree',</span>
<span>  16231 |   value: function renderIntoSubtree() {</span>
<span>> 16232 |     _reactDom2.default.unstable_renderSubtreeIntoContainer(this, this.renderChildren(), this._element);</span>
<span>  16233 | </span>
<span>  16234 |     // check if modal should receive focus</span>
<span>  16235 |     if (this._focus) {</span></code></pre>
<pre><button>View compiled</button></pre>
<div>
<pre>Modal.show

<a rel="nofollow">D:/GitPro/re-pro/dist/mdbreact.js:16205</a>

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

</pre>
</div>
</div>
</div>
My code:

App.js
<div>
<pre>import React, { Component } from 'react';

import Modal from './ModalPage';

class App extends Component {

constructor(props) {

super(props);

this.state= {

}

render() {

return (

<divclassName="App">

</div>

);

}

export default App;

</pre>
index.js
<div>
<pre>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'));</pre>
</div>
</div>

ModalPage.js
<div>
<pre>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 (

<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>

<divclassName="datepicker-wrapper">

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

</div>

</MuiThemeProvider>

</ModalBody>

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

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

</ModalFooter>

</Modal>

</Container>

);

}

export default ModalPage;</pre>
</div>
I followed your example, but the same error

Please insert min. 20 characters.

Good morning Mikołajm, thank you for your attention. But the same mistake happened.

×

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.

Modal.renderIntoSubtree

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

  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) {

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',

My code: App.js

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;

index.js

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'));

ModalPage.js

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;

I followed your example, but the same error

Add comment

Mikołaj Smoleński staff answered 6 years ago

0 0 Best answer

Hi,

I've prepared working example of DatePicker inside modal for You:

<pre>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;</pre>

Best Regards

Please insert min. 20 characters.

Hi, I've prepared working example of DatePicker inside modal for You:

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;

Best Regards

Add comment

master@mastersistemas.net pro answered 6 years ago

0 0 Best answer

I'm sorry Jakub, but you commented that the component in question works inside
a modal, I tried several ways and could not get it to work.

Could you give me a functional example where it is used within a modal.

Why do I always get into the same mistake.
<pre>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.

</pre>
<pre>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)</pre>
 
<p id="tw-target-text" class="tw-data-text tw-ta tw-text-medium" dir="ltr"><span lang="en">Thank you very much for your attention.</span></p>

Please insert min. 20 characters.

I'm sorry Jakub, but you commented that the component in question works inside a modal, I tried several ways and could not get it to work. Could you give me a functional example where it is used within a modal. Why do I always get into the same mistake.

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.

Add comment

Jakub Strebeyko staff answered 6 years ago

0 0 Best answer

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

master@mastersistemas.net pro commented 6 years ago

Hi Jakub, good morning

Jakub Strebeyko staff commented 6 years ago

Hello. Both error message and the code to be pasted are still in Spanish. I am not sure what kind of help are you expecting - could you clarify?

master@mastersistemas.net pro commented 6 years ago

Sorry, i forgot. could check again. I believe everything is now in English

Jakub Strebeyko staff commented 6 years ago

Well, it is not, which it makes the whole thing impossible to debug remotely. I also don't fully grasp your take on the error message translation, which is essential - these logs usually provide a lot of insight into what failed. Anyway, I tried to make it up myself, meaning taking the Date Picker and inserting it into a Modal. There is a componentDidMount() lifecycle hook method to deal with styling - and fails, as in this case it is trying to querySelector() an element which is not displayed (as it's in the modal), which usually shall generate errors. Outside of this, Date Picker in a modal works OK on my end. Please do not hesitate to contact me or anyone of the Team if you come up with some useful clues, or, which I wish you wholeheartedly, figure it out. With Friendly Regards, Kuba

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

master@mastersistemas.net

Pro User 118Support score
19Questions 11Answers 0Snippets