title: I need to click twice on ,the button to display the component
body: <p>In this react component, I want to render the data to the screen when the 'Submit' button is clicked by the user, but the button has to be pressed twice for the data to display.</p>
  
  <p>Below is my code snippet:</p>
  
  <pre><code>class Invoice extends Component {
    constructor(props) {
      super(props);
      this.state = { items: [], isLoaded: false, transId: "" ,flag:true,errorFlag:false,show:false,displayContent:"",invoice:"",invoiceXmlBody:"",invoiceResult:"",invoiceTransId:"",invoiceResultFlag:false,invoicedisplayFlag:false};
  
    }
  handleChangeInvoice(e) {
      console.log("inside handleChangeInvoice");
      let invoiceXml = e.target.value;
      if (invoiceXml !== undefined) {
        this.setState({ invoiceXmlBody: e.target.value });
      }
    }
  
    handleSubmitInvoiceXml =e=&gt;{
     console.log("*******************inside handleSubmitInvoiceXml***************");
     let url = "http://localhost:8080/postInvoiceXml";
     fetch(url, {
      method: "POST",
      body: JSON.stringify(this.state.invoiceXmlBody),
       })
       .then(res =&gt; res.json()).then(data=&gt;
         {
      this.setState({items:data});
      console.log(this.state.items[0].status);
       console.log("response========="+JSON.stringify(data));
        if(data===undefined){
            this.state.invoiceResultFlag=true;
      }
      else{
        this.state.invoicedisplayFlag=true;
            }
      }
   ) }
  
    render() {
      console.log("---------------------------"+this.state.invoicedisplayFlag);
      return (
        &lt;div className="App"&gt;
          &lt;br/&gt;
            &lt;label className="lable" style={{marginRight:19}}&gt;
                InvoiceXml:
                &lt;input
                  type="text"
                  name="invoiceXml" placeholder="Enter invoice xml"
                  onBlur={this.handleChangeInvoice.bind(this)}  style={{marginLeft:15}} /&gt;
  
              &lt;/label&gt;&lt;br/&gt;&lt;br/&gt;
               &lt;input type="button" onClick={this.handleSubmitInvoiceXml} name="Submit" value="Submit" className="submitButton" /&gt;          
              &lt;br/&gt;
              &lt;br/&gt;&lt;br/&gt;
  
              &lt;div  className={this.state.invoicedisplayFlag?"showDisplay":"hide"}&gt;
                {this.state.items.map((item,i) =&gt; (
                  &lt;div&gt;
                  &lt;h2&gt;Invoice No is: {item.invoiceNo}&lt;/h2&gt;
                   &lt;h2&gt;Transaction id is: {item.transId}&lt;/h2&gt;
                    &lt;h2&gt;Status: { item.status ? 'Success' : 'Failed' }&lt;/h2&gt;
                   &lt;/div&gt;
                         ))}
                 &lt;/div&gt;
         &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>how can I resolve this?</p>