How we can close the error messagebar of office re

Question

I am trying to use fabric react messageBar component in my application but i am not able to close(dismiss) the message section even i clicked on close icon in the messageBar component.

Please find the below code for reference.

import React from 'react'
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib-commonjs/MessageBar'

class MyMessage extends React.Component{

    log=(event)=>{
        console.log('close on test');

    }

    render(){      

        return(
         <div> 
            <MessageBar
            componentRef={(messageBar)=>{this.errorMsgBar = messageBar}}
      messageBarType={MessageBarType.error}
      isMultiline={false}
      onDismiss={(event)=> this.log(event)}
      dismissButtonAriaLabel="Close"
    >
      Error lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.{' '}

    </MessageBar>
</div>

        )
    }
}


export default MyMessage;

Office fabric will as default close functionality or do i need to close it ?

If i need to close it please let me know how we can do that?

thanks in advance.

-Nagaraju

Answer 1

You can try something like this:

import React from 'react'
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib-commonjs/MessageBar'

class MyMessage extends React.Component{
    constructor(){
      super();
      this.state = {
         showMessageBar: true  
      }
    }

    closeMessageBar = () => {
        this.setState({showMessageBar: false})    
    }

    render(){      

        return(
         <div> 
            {this.state.showMessageBar && <MessageBar
              componentRef={(messageBar)=>{this.errorMsgBar = messageBar}}
              messageBarType={MessageBarType.error}
              isMultiline={false}
              onDismiss={()=> this.closeMessageBar()}
              dismissButtonAriaLabel="Close"
            >
             Error lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit.{' '}
           </MessageBar>}
</div>

        )
    }
}


export default MyMessage;