Sometimes the error “Unhandled Rejection (TypeError): Cannot read property 'value' of undefined” appears

Question

I'm creating a onepage website using React. I have which contains all of tabs that can be selected and then App class renders coresponding page. My problem is that sometimes i get error "Unhandled Rejection (TypeError): Cannot read property 'value' of undefined when trying to change current tab. Here is my code, the "await this.setState" seems to cause trouble, but i dont know how to handle this, removing "await" makes me need to click twice to get setState that i want

class AppHeader extends React.Component{

    constructor(props){
      super(props);
      this.state={
        tab:"temp"
      }
    }

    handleClick=async (e)=>{

      e.preventDefault();

     await this.setState({tab:e.target.attributes.tab.value});

      await this.props.handleData(this.state.tab);


      //console.log(this.state.tab);
    }
 render(){
          return(

        <div className='row'>
    <div className='col-md-12'> <div className='form-row' onClick={this.handleClick}> 
    <div className='form-group col-md-3'><a className="btn btn-info btn-block" tab='formularz'  href={this.state.tab}>Formularz zgłoszeniowy</a></div>
    <div className='form-group col'><a className="btn btn-danger btn-block" tab="nieprzypisane" href={this.state.tab}>Reklamacje nieprzypisane</a></div>
    <div className='form-group col'><a className="btn btn-success btn-block" tab="" href={this.state.tab}>Moje reklamacje</a></div>
    <div className='form-group col'><a className="btn btn-info btn-block" tab="wszystkie" href={this.state.tab}>Wszystkie reklamacje</a></div>
    <div className='form-group col'><a className="btn  btn-warning btn-block" tab="zakonczone" href={this.state.tab}>Zakończone</a></div>

    </div></div></div>

          );
      }

And Here is my app class

class App extends React.Component{

  constructor(props){
    super(props);
    this.state={
      currenttab:"temp"


    }

  }
   handleParentData= async(e)=>{
   await this.setState({currenttab:e});

  }


   render(){

        return(
             <div>
        <AppHeader handleData={this.handleParentData}/>
        {(() => {

          switch (this.state.currenttab) {
            case "wszystkie":
              return <Testuje what="http://localhost/system_reklamacji/php/pobierz.php"/>
            case "formularz":
              return <Formularz />
              case"nieprzypisane":
              return <Testuje what="http://localhost/system_reklamacji/php/pobierz_nieprzypisane.php"/>
              case"zakonczone":
              return <Testuje what="http://localhost/system_reklamacji/php/pobierz_zakonczone.php"/>

            default:
              return <Formularz />
          }


      })()}



        <main className="ui main text container">


        </main>
      </div>
        );
    }
}

Thats a real bummer for me, im new to React so i propably don't understand why this happens.

Not sure about setState being used as a promise. As a test you could maybe try to first call handleData and then simply setState with no await. Or try to use the callback syntax of setState. — Luke

Mariusz Rakoczy Mariusz Rakoczy · Accepted Answer · 2019-10-04T11:44:57

Well, the answer is kind of silly, this wasn't a fault of handleClick, but rather my return, and the onClick event placed in div with className='form-row'. It seems that the problem was when clicking inside the div, but not in the corresponding . There was a small gap between buttons that caused the trouble. Anyway thanks @Luke, i managed to eliminate setState completely after your suggestion.

Sometimes the error “Unhandled Rejection (TypeError): Cannot read property 'value' of undefined” appears

1 Answers