Блог

У меня есть строка поиска, которая отображает

тег с текстом, в котором говорится: «Файлы не соответствуют вашему запросу. Мне нужно скрыть p-тег, у него должен быть класс css с «display: none», пока в нем нет текста. Я пытаюсь сделать это с помощью небольшого js.

Вот мой код в моем приложении react:

 let errorMessage = ''
    if (!this.state.files.length amp;amp; !this.state.folders.length) {
      errorMessage = "You don't have any files in storage yet."
    } else if (this.props.searchValue amp;amp; !filesToDisplay.length) {
      errorMessage = 'No files match your search.'
    }

    <p className='search-error'>{errorMessage}</p>

 
  

и мой css:

 .search-error {
  text-align: center;
  color: $primary-text-color;
  padding: 0 1em;
  font-size: 2em;
  word-wrap: break-word;
}
  

Вы можете отобразить p-тег в соответствии со значением ErrorMessage

 {
  errorMessage amp;amp;  <p className='search-error'>{errorMessage}</p>
}
  

Вы можете условно визуализировать search-error только в том случае, если в searchValue реквизите что-то есть:

 return (
  (other JSX here)
  {
    this.props.searchValue
      ? <p className='search-error'>{errorMessage}</p>
      : null
  }
);