Отображать сообщения в подсказке из массива

Question

Я новичок в front-end и javascript.Я использую реагировать JS.Здесь у меня есть кнопка, которая похожа на ->

<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>

Теперь, во всплывающей подсказке я должен показать пользователю некоторые сообщения, поэтому я написал функцию, которая похожа на

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;
    }

Теперь, это как, может быть 3 сообщения за раз или 2 или может быть 1 .so, Здесь сейчас я хочу показать пользователю эти сообщения.

У меня нет способа сделать это?Кто-нибудь может подсказать мне, как я могу это сделать?Спасибо. Любая подсказка будет полезна.

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,
  })
}

Теперь HTML часть

 <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>