How we can close the error messagebar of office react fabric component?

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

score 11 · Accepted Answer · answered Sep 10 '18 at 12:27

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;

Thank you @Lazar Nikolic i think i might have strict to my basics as i was looking something in the messageBar component but your solution is solved my problem — Nagaraju, Sep 10 '18 at 13:18
Thank you for letting me know. If it is not to much to ask, can you upvote my answer and mark it as resolved? — Lazar Nikolic, Sep 10 '18 at 13:19

score 0 · Answer 2 · answered Apr 01 '22 at 10:04

//this works for me    
//html content in render  
      {  
                              this.state.showMessageBar  
                                ?  
                                <div className="form-group">  
                                  <Stack >  
                                    <MessageBar messageBarType={this.state.messageType} 
                      onDismiss={()=> this.closeMessageBar()}
                      dismissButtonAriaLabel="Close">{this.state.message}</MessageBar>  
                                  </Stack>  
                                </div>  
                                :  
                                null  
                              }
        
        
        //close message bar
        
         @autobind
          private closeMessageBar(){
            this.setState({showMessageBar: false})    
         }
        
        //set message bar value
         @autobind
          private updatemessagebar(){
        this.setState({ 
                message: "Item: created successfully. ",  
                showMessageBar: true,  
                messageType: MessageBarType.success  
              }); 
        }

How we can close the error messagebar of office react fabric component?

2 Answers2

Linked