React Error : is declared but its value is never read. [6133]

Question

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?

Please help.

For your reference please find the code below:

• Benficiary Type Modal

  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) => {
          this.setState({ dropDownValue: value });
      }
      clickHandlernextBtn = (e) => {
          if ((e === 'click') && (this.state.dropDownValue === 'Person')) {
              return (
                  <div>
                      {console.log('Dropdown value is ', this.state.dropDownValue)}
                      <personModal />
                  </div>);
          }
      };
  
      render() {
          if (!this.props.show) {
              return null;
          }
  
          return (
              <div style={backdropStyle}>
                  <div style={modalStyle}>
                      <h5><b>{'Add Beneficiary'}</b></h5>
                      <p>{'All fields are required unless otherwise noted.'}</p>
                      {/* <form onSubmit={this.handleSubmit}>
  
                          <select value={this.state.value} onChange={this.handleChange} >
                              <b><option value="beneficiary type">{'Beneficiary Type'}</option></b>
                              <option value="person">{'Person'}</option>
                              <option value="living trust">{'Living Trust'}</option>
                              <option value="testamentary trust created in the insured’s will">{'Testamentary Trust created in the Insured’s Will'}</option>
                              <option value="charity/organization">{'Charity/Organization'}</option>
                              <option value="estate ">{'Estate '}</option>
                          </select>
  
                          <input type="submit" value="Submit" />
                      </form> */}
                      <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) => this.handleDropDownChange(event, value)}
                      />
                      <Button
                          value="NEXT"
                          className="next_btn"
                          id="SMDEmployer_schedulepayment_next-button"
                          onEvent={e => this.clickHandlernextBtn(e)}
                      />
                  </div>
              </div>
          );
      }
  }
  export default Modal;
  

• personModal.component

  import React, { Component } from 'react';
  class personModal extends Component {
   constructor(props) {
      super(props);
      this.state = {
          dropDownValue: ''
      };
   }  
   render() {
    return (            
      <div>
          {'Hi PersonModal here'}
      </div>
    );
   }
  }
  export default personModal;
  

Note: Button is custom component which is working fine.

Answer 1

I had the same problem. Its simple solution is importing the component with custom names starting with a capital letter.

Answer 2

The personModal component used as <personModal /> will be interpreted as HTML tag as it begins with a lowercase. To use the component rename the component to PersonModal or any other name beginning with an uppercase.