ReactJS modal not opening using Materialize css
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am new to ReactJS & learning to create model using Materialize css.
https://materializecss.com
import React, { Component } from 'react';
import Modal from 'components/modal.jsx';
class Card extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
}
}
modalToggle = () => {
this.setState({modal: !this.state.modal})
console.log(this.state.modal);
}
render() {
return (
<div className="row">
<div className="col s12 m6" onClick={this.modalToggle}>
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">
Card Title
</span>
<p>
Hello I'm new card.
</p>
</div>
<div className="card-action">
<a href="#">Click Me</a>
<a href="#">Don't Click Me</a>
</div>
</div>
</div>
<Modal onClick={this.modalToggle} status={this.state.modal} />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
And my Modal Component looks like,
import React, { Component } from 'react';
class Modal extends Component {
render() {
return(
<div id="modal1" className="modal modal-fixed-footer">
<div className="modal-content">
<h4>Modal Title</h4>
<p>Description</p>
</div>
<div className="modal-footer">
<a href="#!" className="modal-close waves-effect waves-green btn-flat">
Click Me
</a>
</div>
</div>
);
}
}
export default Modal;
When the card get clicked I want my modal show up. For that I have created function modalToggle. Can someone please guide me how to make the modal pop up. The code is running perfectly and also printing the state of modal. Is there anything wrong with my code.
I know that one solution to this is React-Materialize. I want to pop modal without React-materialize ... Is there any solution without using the React-Materliaze.
I would appreciate the help.
reactjs materialize
add a comment |
I am new to ReactJS & learning to create model using Materialize css.
https://materializecss.com
import React, { Component } from 'react';
import Modal from 'components/modal.jsx';
class Card extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
}
}
modalToggle = () => {
this.setState({modal: !this.state.modal})
console.log(this.state.modal);
}
render() {
return (
<div className="row">
<div className="col s12 m6" onClick={this.modalToggle}>
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">
Card Title
</span>
<p>
Hello I'm new card.
</p>
</div>
<div className="card-action">
<a href="#">Click Me</a>
<a href="#">Don't Click Me</a>
</div>
</div>
</div>
<Modal onClick={this.modalToggle} status={this.state.modal} />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
And my Modal Component looks like,
import React, { Component } from 'react';
class Modal extends Component {
render() {
return(
<div id="modal1" className="modal modal-fixed-footer">
<div className="modal-content">
<h4>Modal Title</h4>
<p>Description</p>
</div>
<div className="modal-footer">
<a href="#!" className="modal-close waves-effect waves-green btn-flat">
Click Me
</a>
</div>
</div>
);
}
}
export default Modal;
When the card get clicked I want my modal show up. For that I have created function modalToggle. Can someone please guide me how to make the modal pop up. The code is running perfectly and also printing the state of modal. Is there anything wrong with my code.
I know that one solution to this is React-Materialize. I want to pop modal without React-materialize ... Is there any solution without using the React-Materliaze.
I would appreciate the help.
reactjs materialize
add a comment |
I am new to ReactJS & learning to create model using Materialize css.
https://materializecss.com
import React, { Component } from 'react';
import Modal from 'components/modal.jsx';
class Card extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
}
}
modalToggle = () => {
this.setState({modal: !this.state.modal})
console.log(this.state.modal);
}
render() {
return (
<div className="row">
<div className="col s12 m6" onClick={this.modalToggle}>
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">
Card Title
</span>
<p>
Hello I'm new card.
</p>
</div>
<div className="card-action">
<a href="#">Click Me</a>
<a href="#">Don't Click Me</a>
</div>
</div>
</div>
<Modal onClick={this.modalToggle} status={this.state.modal} />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
And my Modal Component looks like,
import React, { Component } from 'react';
class Modal extends Component {
render() {
return(
<div id="modal1" className="modal modal-fixed-footer">
<div className="modal-content">
<h4>Modal Title</h4>
<p>Description</p>
</div>
<div className="modal-footer">
<a href="#!" className="modal-close waves-effect waves-green btn-flat">
Click Me
</a>
</div>
</div>
);
}
}
export default Modal;
When the card get clicked I want my modal show up. For that I have created function modalToggle. Can someone please guide me how to make the modal pop up. The code is running perfectly and also printing the state of modal. Is there anything wrong with my code.
I know that one solution to this is React-Materialize. I want to pop modal without React-materialize ... Is there any solution without using the React-Materliaze.
I would appreciate the help.
reactjs materialize
I am new to ReactJS & learning to create model using Materialize css.
https://materializecss.com
import React, { Component } from 'react';
import Modal from 'components/modal.jsx';
class Card extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
}
}
modalToggle = () => {
this.setState({modal: !this.state.modal})
console.log(this.state.modal);
}
render() {
return (
<div className="row">
<div className="col s12 m6" onClick={this.modalToggle}>
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">
Card Title
</span>
<p>
Hello I'm new card.
</p>
</div>
<div className="card-action">
<a href="#">Click Me</a>
<a href="#">Don't Click Me</a>
</div>
</div>
</div>
<Modal onClick={this.modalToggle} status={this.state.modal} />
</div>
);
}
}
ReactDom.render(<App />, document.getElementById('root'));
And my Modal Component looks like,
import React, { Component } from 'react';
class Modal extends Component {
render() {
return(
<div id="modal1" className="modal modal-fixed-footer">
<div className="modal-content">
<h4>Modal Title</h4>
<p>Description</p>
</div>
<div className="modal-footer">
<a href="#!" className="modal-close waves-effect waves-green btn-flat">
Click Me
</a>
</div>
</div>
);
}
}
export default Modal;
When the card get clicked I want my modal show up. For that I have created function modalToggle. Can someone please guide me how to make the modal pop up. The code is running perfectly and also printing the state of modal. Is there anything wrong with my code.
I know that one solution to this is React-Materialize. I want to pop modal without React-materialize ... Is there any solution without using the React-Materliaze.
I would appreciate the help.
reactjs materialize
reactjs materialize
asked Nov 16 '18 at 21:54
TEMPTEMP
7010
7010
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
It can be implemented in materializeCSS also.
For this you need to do npm install materialize-css@next
. After this, you need to import the materialize-css in your component JS file.
To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount()
has to be made and then it can be used in ref
.
CodeSandBox - Modal Working Demo
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
class Modal extends Component {
componentDidMount() {
const options = {
onOpenStart: () => {
console.log("Open Start");
},
onOpenEnd: () => {
console.log("Open End");
},
onCloseStart: () => {
console.log("Close Start");
},
onCloseEnd: () => {
console.log("Close End");
},
inDuration: 250,
outDuration: 250,
opacity: 0.5,
dismissible: false,
startingTop: "4%",
endingTop: "10%"
};
M.Modal.init(this.Modal, options);
// If you want to work on instance of the Modal then you can use the below code snippet
// let instance = M.Modal.getInstance(this.Modal);
// instance.open();
// instance.close();
// instance.destroy();
}
render() {
return (
<>
<a
className="waves-effect waves-light btn modal-trigger"
data-target="modal1"
>
Modal
</a>
<div
ref={Modal => {
this.Modal = Modal;
}}
id="modal1"
className="modal"
>
{/* If you want Bottom Sheet Modal then add
bottom-sheet class */}
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#" class="modal-close waves-effect waves-red btn-flat">
Disagree
</a>
<a href="#" class="modal-close waves-effect waves-green btn-flat">
Agree
</a>
</div>
</div>
</>
);
}
}
export default Modal;
Thanks works perfectly. Just wondering if I try to create button on index.js and onClick I trigger modal. Is it possible? I know this is new question but just curious. Cheers
– TEMP
Nov 17 '18 at 6:49
Yes it's possible to open a modal with button click and if it worked then please accept the answer.
– Germa Vinsmoke
Nov 17 '18 at 7:14
how you did the onClick event on the index or any other component, calling the modal id passed to the Modal Component?
– tubadc
Jan 5 at 22:27
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345945%2freactjs-modal-not-opening-using-materialize-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It can be implemented in materializeCSS also.
For this you need to do npm install materialize-css@next
. After this, you need to import the materialize-css in your component JS file.
To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount()
has to be made and then it can be used in ref
.
CodeSandBox - Modal Working Demo
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
class Modal extends Component {
componentDidMount() {
const options = {
onOpenStart: () => {
console.log("Open Start");
},
onOpenEnd: () => {
console.log("Open End");
},
onCloseStart: () => {
console.log("Close Start");
},
onCloseEnd: () => {
console.log("Close End");
},
inDuration: 250,
outDuration: 250,
opacity: 0.5,
dismissible: false,
startingTop: "4%",
endingTop: "10%"
};
M.Modal.init(this.Modal, options);
// If you want to work on instance of the Modal then you can use the below code snippet
// let instance = M.Modal.getInstance(this.Modal);
// instance.open();
// instance.close();
// instance.destroy();
}
render() {
return (
<>
<a
className="waves-effect waves-light btn modal-trigger"
data-target="modal1"
>
Modal
</a>
<div
ref={Modal => {
this.Modal = Modal;
}}
id="modal1"
className="modal"
>
{/* If you want Bottom Sheet Modal then add
bottom-sheet class */}
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#" class="modal-close waves-effect waves-red btn-flat">
Disagree
</a>
<a href="#" class="modal-close waves-effect waves-green btn-flat">
Agree
</a>
</div>
</div>
</>
);
}
}
export default Modal;
Thanks works perfectly. Just wondering if I try to create button on index.js and onClick I trigger modal. Is it possible? I know this is new question but just curious. Cheers
– TEMP
Nov 17 '18 at 6:49
Yes it's possible to open a modal with button click and if it worked then please accept the answer.
– Germa Vinsmoke
Nov 17 '18 at 7:14
how you did the onClick event on the index or any other component, calling the modal id passed to the Modal Component?
– tubadc
Jan 5 at 22:27
add a comment |
It can be implemented in materializeCSS also.
For this you need to do npm install materialize-css@next
. After this, you need to import the materialize-css in your component JS file.
To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount()
has to be made and then it can be used in ref
.
CodeSandBox - Modal Working Demo
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
class Modal extends Component {
componentDidMount() {
const options = {
onOpenStart: () => {
console.log("Open Start");
},
onOpenEnd: () => {
console.log("Open End");
},
onCloseStart: () => {
console.log("Close Start");
},
onCloseEnd: () => {
console.log("Close End");
},
inDuration: 250,
outDuration: 250,
opacity: 0.5,
dismissible: false,
startingTop: "4%",
endingTop: "10%"
};
M.Modal.init(this.Modal, options);
// If you want to work on instance of the Modal then you can use the below code snippet
// let instance = M.Modal.getInstance(this.Modal);
// instance.open();
// instance.close();
// instance.destroy();
}
render() {
return (
<>
<a
className="waves-effect waves-light btn modal-trigger"
data-target="modal1"
>
Modal
</a>
<div
ref={Modal => {
this.Modal = Modal;
}}
id="modal1"
className="modal"
>
{/* If you want Bottom Sheet Modal then add
bottom-sheet class */}
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#" class="modal-close waves-effect waves-red btn-flat">
Disagree
</a>
<a href="#" class="modal-close waves-effect waves-green btn-flat">
Agree
</a>
</div>
</div>
</>
);
}
}
export default Modal;
Thanks works perfectly. Just wondering if I try to create button on index.js and onClick I trigger modal. Is it possible? I know this is new question but just curious. Cheers
– TEMP
Nov 17 '18 at 6:49
Yes it's possible to open a modal with button click and if it worked then please accept the answer.
– Germa Vinsmoke
Nov 17 '18 at 7:14
how you did the onClick event on the index or any other component, calling the modal id passed to the Modal Component?
– tubadc
Jan 5 at 22:27
add a comment |
It can be implemented in materializeCSS also.
For this you need to do npm install materialize-css@next
. After this, you need to import the materialize-css in your component JS file.
To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount()
has to be made and then it can be used in ref
.
CodeSandBox - Modal Working Demo
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
class Modal extends Component {
componentDidMount() {
const options = {
onOpenStart: () => {
console.log("Open Start");
},
onOpenEnd: () => {
console.log("Open End");
},
onCloseStart: () => {
console.log("Close Start");
},
onCloseEnd: () => {
console.log("Close End");
},
inDuration: 250,
outDuration: 250,
opacity: 0.5,
dismissible: false,
startingTop: "4%",
endingTop: "10%"
};
M.Modal.init(this.Modal, options);
// If you want to work on instance of the Modal then you can use the below code snippet
// let instance = M.Modal.getInstance(this.Modal);
// instance.open();
// instance.close();
// instance.destroy();
}
render() {
return (
<>
<a
className="waves-effect waves-light btn modal-trigger"
data-target="modal1"
>
Modal
</a>
<div
ref={Modal => {
this.Modal = Modal;
}}
id="modal1"
className="modal"
>
{/* If you want Bottom Sheet Modal then add
bottom-sheet class */}
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#" class="modal-close waves-effect waves-red btn-flat">
Disagree
</a>
<a href="#" class="modal-close waves-effect waves-green btn-flat">
Agree
</a>
</div>
</div>
</>
);
}
}
export default Modal;
It can be implemented in materializeCSS also.
For this you need to do npm install materialize-css@next
. After this, you need to import the materialize-css in your component JS file.
To use the Javascript materialize-css components, a reference of these components has to be made in componentDidMount()
has to be made and then it can be used in ref
.
CodeSandBox - Modal Working Demo
import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";
class Modal extends Component {
componentDidMount() {
const options = {
onOpenStart: () => {
console.log("Open Start");
},
onOpenEnd: () => {
console.log("Open End");
},
onCloseStart: () => {
console.log("Close Start");
},
onCloseEnd: () => {
console.log("Close End");
},
inDuration: 250,
outDuration: 250,
opacity: 0.5,
dismissible: false,
startingTop: "4%",
endingTop: "10%"
};
M.Modal.init(this.Modal, options);
// If you want to work on instance of the Modal then you can use the below code snippet
// let instance = M.Modal.getInstance(this.Modal);
// instance.open();
// instance.close();
// instance.destroy();
}
render() {
return (
<>
<a
className="waves-effect waves-light btn modal-trigger"
data-target="modal1"
>
Modal
</a>
<div
ref={Modal => {
this.Modal = Modal;
}}
id="modal1"
className="modal"
>
{/* If you want Bottom Sheet Modal then add
bottom-sheet class */}
<div className="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#" class="modal-close waves-effect waves-red btn-flat">
Disagree
</a>
<a href="#" class="modal-close waves-effect waves-green btn-flat">
Agree
</a>
</div>
</div>
</>
);
}
}
export default Modal;
answered Nov 17 '18 at 6:09
Germa VinsmokeGerma Vinsmoke
1,0852620
1,0852620
Thanks works perfectly. Just wondering if I try to create button on index.js and onClick I trigger modal. Is it possible? I know this is new question but just curious. Cheers
– TEMP
Nov 17 '18 at 6:49
Yes it's possible to open a modal with button click and if it worked then please accept the answer.
– Germa Vinsmoke
Nov 17 '18 at 7:14
how you did the onClick event on the index or any other component, calling the modal id passed to the Modal Component?
– tubadc
Jan 5 at 22:27
add a comment |
Thanks works perfectly. Just wondering if I try to create button on index.js and onClick I trigger modal. Is it possible? I know this is new question but just curious. Cheers
– TEMP
Nov 17 '18 at 6:49
Yes it's possible to open a modal with button click and if it worked then please accept the answer.
– Germa Vinsmoke
Nov 17 '18 at 7:14
how you did the onClick event on the index or any other component, calling the modal id passed to the Modal Component?
– tubadc
Jan 5 at 22:27
Thanks works perfectly. Just wondering if I try to create button on index.js and onClick I trigger modal. Is it possible? I know this is new question but just curious. Cheers
– TEMP
Nov 17 '18 at 6:49
Thanks works perfectly. Just wondering if I try to create button on index.js and onClick I trigger modal. Is it possible? I know this is new question but just curious. Cheers
– TEMP
Nov 17 '18 at 6:49
Yes it's possible to open a modal with button click and if it worked then please accept the answer.
– Germa Vinsmoke
Nov 17 '18 at 7:14
Yes it's possible to open a modal with button click and if it worked then please accept the answer.
– Germa Vinsmoke
Nov 17 '18 at 7:14
how you did the onClick event on the index or any other component, calling the modal id passed to the Modal Component?
– tubadc
Jan 5 at 22:27
how you did the onClick event on the index or any other component, calling the modal id passed to the Modal Component?
– tubadc
Jan 5 at 22:27
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53345945%2freactjs-modal-not-opening-using-materialize-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown