title: React Error : is declared but its value is never read. [6133]
body: <p>I have created a modal(benficiary Type) and I am trying to call another modal when I am selecting the Person as Beneficiary Type and clicking on the next in the Beneficiary Type modal but while I am trying to implement it, I am failing at below two points:
  1. When I am importing the second modal(personModal) it is showing me the message "personModal is declared but its value is never read. [6133]"although I am using that import also and hence it is not getting navigated.
  2. On navigation to the personModal after clicking on next button present in the beneficiary type modal, I want to hide the first modal and show only the second modal,without using the react navigator and react routes.Is there a way to do it?</p>
  
  <p>Please help.</p>
  
  <p>For your reference please find the code below:</p>
  
  <ul>
  <li><p>Benficiary Type Modal</p>
  
  <pre><code>import React, { Component } from 'react';
  import Select from 'gssp-common-ui/lib/components/select/select.component';
  import Button from 'gssp-common-ui/lib/components/button/button.component';
  import personModal from './personModal.component';
  
  
  const backdropStyle = {
      position: 'fixed',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      backgroundColor: 'rgba(0,0,0,0.3)',
      padding: 50
  };
  const modalStyle = {
      backgroundColor: '#fff',
      borderRadius: 5,
      maxWidth: 500,
      minHeight: 300,
      margin: '0 auto',
      padding: 30,
      position: 'relative'
  };
  
  class Modal extends Component {
      constructor(props) {
          super(props);
          this.state = {
              dropDownValue: '',
              showBeneficiaryModel: false
          };
      }
      handleDropDownChange = (event, value) =&gt; {
          this.setState({ dropDownValue: value });
      }
      clickHandlernextBtn = (e) =&gt; {
          if ((e === 'click') &amp;&amp; (this.state.dropDownValue === 'Person')) {
              return (
                  &lt;div&gt;
                      {console.log('Dropdown value is ', this.state.dropDownValue)}
                      &lt;personModal /&gt;
                  &lt;/div&gt;);
          }
      };
  
      render() {
          if (!this.props.show) {
              return null;
          }
  
          return (
              &lt;div style={backdropStyle}&gt;
                  &lt;div style={modalStyle}&gt;
                      &lt;h5&gt;&lt;b&gt;{'Add Beneficiary'}&lt;/b&gt;&lt;/h5&gt;
                      &lt;p&gt;{'All fields are required unless otherwise noted.'}&lt;/p&gt;
                      {/* &lt;form onSubmit={this.handleSubmit}&gt;
  
                          &lt;select value={this.state.value} onChange={this.handleChange} &gt;
                              &lt;b&gt;&lt;option value="beneficiary type"&gt;{'Beneficiary Type'}&lt;/option&gt;&lt;/b&gt;
                              &lt;option value="person"&gt;{'Person'}&lt;/option&gt;
                              &lt;option value="living trust"&gt;{'Living Trust'}&lt;/option&gt;
                              &lt;option value="testamentary trust created in the insured’s will"&gt;{'Testamentary Trust created in the Insured’s Will'}&lt;/option&gt;
                              &lt;option value="charity/organization"&gt;{'Charity/Organization'}&lt;/option&gt;
                              &lt;option value="estate "&gt;{'Estate '}&lt;/option&gt;
                          &lt;/select&gt;
  
                          &lt;input type="submit" value="Submit" /&gt;
                      &lt;/form&gt; */}
                      &lt;Select
                          className="dropdown-class"
                          title={'Beneficiary Type'}
                          options={[
                              {
                                  key: 'Person',
                                  value: 'Person'
                              },
                              {
                                  key: 'Living Trust',
                                  value: 'Living Trust'
                              },
                              {
                                  key: 'Remove ClasTestamentary Trust created in the Insured’s Will',
          `enter code here`                        value: 'Testamentary Trust created in the Insured’s Will'
                       enter code here       },
                              {
                                  key: 'Charity/Organization',
                                  value: 'Charity/Organization'
                              },
                              {
                                  key: 'Estate',
                                  value: 'Estate'
                              }
  
  
                          ]
                          }
          onEvent={(event, value) =&gt; this.handleDropDownChange(event, value)}
                      /&gt;
                      &lt;Button
                          value="NEXT"
                          className="next_btn"
                          id="SMDEmployer_schedulepayment_next-button"
                          onEvent={e =&gt; this.clickHandlernextBtn(e)}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  export default Modal;
  </code></pre></li>
  <li><p>personModal.component</p>
  
  <pre><code>import React, { Component } from 'react';
  class personModal extends Component {
   constructor(props) {
      super(props);
      this.state = {
          dropDownValue: ''
      };
   }  
   render() {
    return (            
      &lt;div&gt;
          {'Hi PersonModal here'}
      &lt;/div&gt;
    );
   }
  }
  export default personModal;
  </code></pre></li>
  </ul>
  
  <p><strong>Note</strong>: Button is custom component which is working fine.</p>