CODEWITHSUNDEEP
reactjsjsxreact-props
Ishan Patel
Ishan Patel

Reputation: 6091

how to set value of const of one component in other component in ReactJS?

I am implementing Modal window on button click.

My question is what is the best way to display dialog component onclick of the button. I am trying set CSS of the var modal, which is giving me error. ./src/components/btn-root.js Line 14: 'modal' is not defined no-undef

I have following button component on which onclick would display Modal Window Component. 

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ModelDialog from './modal-dialog';


 export default class ButtonRoot extends Component{
   render(){

         // Get the button that opens the modal
         var btn = document.getElementById("base-btn");

         // When the user clicks the button, open the modal
         btn.onclick = function() {
             modal.style.display = "block";
         }

     return (
       <button id='base-btn'>Order Credit</button>
     );
   }
 }

Following is the Model Dialog Component

import React, { Component } from 'react';
import ReactDOM from 'react-dom';


export default class ModelDialog extends Component {
  render(){
    // Get the modal
    var modal = document.getElementById('myModal');

    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];

    return(
      <div id="myModal" className="modal">
        <div className="modal-content">
            <span className="close">&times;</span>
            <div className="order--container">
              <p>5 IV's</p>
              <p>25 IV's</p>
              <p>50 IV's</p>
              <p>100 IV's</p>
              <p>500 IV's</p>
            </div>
            <div className="order--form">
              <form>
                <div className="tc--checkbox">
                  <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter" />
                  <label for="tcs">I accept Terms & Conditions</label>
                </div>
                <div className="order--btn">
                  <button type="submit">Order</button>
                </div>
              </form>
            </div>
        </div>
      </div>
    );
  }
}

Upvotes: 0

Views: 1737

Answers (1)

Jackyef
Jackyef

Reputation: 5002

To answer your two questions:

"how to set value of const of one component in other component in ReactJS?"

Pass a function that changes the value of the variable as a props to the component.

"My question is what is the best way to display dialog component onclick of the button."

You can simply use a state to decide whether to render the modal or not. Something you can name like showModal, and in your render function just do

{this.state.showModal && <YourModalComponent />}

Upvotes: 2

Related Questions