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







1















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.










share|improve this question





























    1















    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.










    share|improve this question

























      1












      1








      1








      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.










      share|improve this question














      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 16 '18 at 21:54









      TEMPTEMP

      7010




      7010
























          1 Answer
          1






          active

          oldest

          votes


















          1














          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;





          share|improve this answer
























          • 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














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


          }
          });














          draft saved

          draft discarded


















          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









          1














          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;





          share|improve this answer
























          • 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


















          1














          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;





          share|improve this answer
























          • 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
















          1












          1








          1







          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;





          share|improve this answer













          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;






          share|improve this answer












          share|improve this answer



          share|improve this answer










          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





















          • 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






















          draft saved

          draft discarded




















































          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.




          draft saved


          draft discarded














          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





















































          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







          Popular posts from this blog

          Bressuire

          Vorschmack

          Quarantine