title: React: change modal's content without passing entire DOM elements as a props?
body: <p>I am new to React and currently I am trying to build a Two-Fact-Auth Modal-like UI in my project.</p>
  
  <p>The Modal looks relatively sample as well.</p>
  
  <ol>
  <li>Title</li>
  <li>A message</li>
  <li>Modal Content(which can be a inputbox, or one or more drop-down selections, or just displaying string)</li>
  <li>A Button</li>
  </ol>
  
  <p>Imagine there are some modals: First one ask you to enter your phone number. After you typed your phone number, it get direct to second modal and second modal will display the phone number you typed and ask you to confirm, and third modal will display other things and so on.</p>
  
  <p>My approach to this is to build a my own modal component using <code>ReactStrap</code>. </p>
  
  <pre><code>export default class ModalControl extends React.Component{
      render(){
          return(
              &lt;div&gt;
                  &lt;Modal isOpen={this.props.isOpen}&gt;
                      &lt;ModalHeader &gt;{this.props.title}&lt;/ModalHeader&gt;
                      &lt;ModalBody&gt;
                          &lt;p&gt;{this.props.message}&lt;/p&gt;
                          &lt;p&gt;{"Content that is change dynamically"}&lt;/p&gt;
                      &lt;/ModalBody&gt;
                      &lt;ModalFooter&gt;
                          &lt;Button color="info" onClick={() =&gt; this.props.clickAction&gt;{this.props.buttonLabel}&lt;/Button&gt;
                      &lt;/ModalFooter&gt;
                  &lt;/Modal&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>However, One of the problem I have is to change the modal content. Since the Modal does not know if itself contains a <code>selection</code>, <code>'A input box'</code>, or '<code>Just a string</code>', what should i do so the ModalControl can take content that is dynamically changing?</p>
  
  <p><strong>My attempt:</strong> 
  I tried to pass entire DOM elements as a string to modal and parse it in the modalControl. However, I have read a SO post that saying passing Dom Elements is not recommended in React.</p>
  
  <p>In my main, i have something like this, but apparently it is not rendering</p>
  
  <pre><code>&lt;ModalControl
      isOpen={true}
      title={"Code Authentication"}
      message={"For your security, we need to verify your identity by sending a code to your phone number"}
      buttonLabel={"Verify Code"}
  &gt;
  &lt;div className="row"&gt;
            &lt;div className="col-sm-6"&gt;
                {this.getPhoneList()}
            &lt;/div&gt;
            &lt;div className="col-sm-6"&gt;
                {this.getMethodList()}
            &lt;/div&gt;
  &lt;/div&gt;
  &lt;/ModalControl&gt;
  </code></pre>
  
  <p><code>What i want to achieve</code>: How do I implement a modal class whose modal content that is dynamically changing? Since I am new to React, I am not sure if this is the best practice. If it is not, is there a better approach?</p>