在数组中的工具提示中显示消息

Question

I am new to front-end and javascript. I am using react js . Here, I have a button which is like ->

<div className="fetchBtnDiv mx-auto" data-toggle="tooltip" data-placement="right"  title={this.generateToolTipMessage(this.state.hasAllFieldsFilld, this.state.hasAllHLowFieldsFilled, this.state.hasAllMidFieldsFilled)}>
                    <button className="btn btn-primary fetchBtnSize" disabled={(this.state.disableFetch || this.state.disableHighetch || this.state.disableMidFetch) || ( this.state.hasAllFieldsFilld ) || ( this.state.hasAllHLowFieldsFilled ) || ( this.state.hasAllMidFieldsFilled )}>Fetch Questions</button>
                </div>

Now, On tool tip I have to show user some messages , so I have written a function which is like ,

generateToolTipMessage(highData, lowData, mediumData) {
        let errorMessages = [];
        if(highData) {
            errorMessages.push("Please fill all the details in the High Level Criteria");
        } 
        if(lowData) {
            errorMessages.push("Please fill all the details in the Low Level Criteria");
        }
        if(mediumData) {
            errorMessages.push("Please fill all the details in the Medium Level Criteria");
        }
        return errorMessages;
    }

Now, It is like, There can be 3 messages at a time or 2 or may be 1 .so,Here Now I want to show user this messages.

I am not getting a way to do this ? Can any one suggest me How I can do this ? Thanks.Any hint will be helpful.

Answer 1

state={
errors: '',
}

onMouseOverEventTriggered = () => {
       let errorMessages = [];
       if(highData) {
        errorMessages.push("Please fill all the details in the High Level Criteria");
       } 
          if(lowData) {
        errorMessages.push("Please fill all the details in the Low Level Criteria");
        }
        if(mediumData) {
        errorMessages.push("Please fill all the details in the Medium Level 
       Criteria");
    }
  this.setState({
  errors: errorMessages,
  })
}

Now the Html Part

 <div className="fetchBtnDiv mx-auto" data-toggle="tooltip" data-placement="right"  
   title={this.state.errors} onMouseOver={this.onMouseOverEventTriggered}>
                <button className="btn btn-primary fetchBtnSize" disabled= 
    {(this.state.disableFetch || this.state.disableHighetch || 
   this.state.disableMidFetch) 
    || ( this.state.hasAllFieldsFilld ) || ( this.state.hasAllHLowFieldsFilled ) || ( 
    this.state.hasAllMidFieldsFilled )}>Fetch Questions</button>
            </div>