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.

Answer 3

Your file name should be start with capital letter and In latest React version, you don't need to import. And if you are getting 'React' must be in scope when using JSXeslintreact/react-in-jsx-scope then off this in your eslint file like:

"react/react-in-jsx-scope": "off",

Answer 4

In my setup, I just needed to change the file ending to .tsx, instead of .ts. If you're using JavaScript, the equivalent might be changing a .js file to a .jsx file.

Answer 5

I am also faced similar issue. In vs code, there is quick fix options choose eslint-disable @typescript-eslint/no-unused-vars for entire file/line. This solution worked for me.