когда я не вижу результаты API, мне нужно показать данные не найдены

Question

• , когда я набираю 1sport1, я вижу результаты.
• , когда я печатаю 1sport12, я не вижу никаких результатов.
• , так что тип должен показывать, что dta не найден.
• и при очистке всего он должен очистить текстовое поле.
• но проблема в этой строке console.log("resp.json()--->", resp.json().[[PromiseValue]]);
• Я думал, что когда длина равна 0, я покажу данные не найдены.
• но я получаю эту ошибку. /src/searchbar.js: Unexpected token (31:48)
• Я комментирую следующие строки, чтобы вы могли видеть вывод в браузере // console.log("resp.json()--->", resp.json().[[PromiseValue]]); // display: this.state.noData ? "" : "none"
• Можете ли вы сказать мнекак показать, что данные не найдены, если нет данных, поступающих от API.
• , предоставив мой фрагмент кода и песочницу ниже.

https://codesandbox.io/s/jovial-cdn-14o1w

getQuery = async (type = "", search_tag = "") => {
    var url = "https://hn.algolia.com/api/v1/search?tags=";
    const resp = await fetch(`${url}${type}&query=${search_tag}`);
    // console.log("resp.json()--->", resp.json().[[PromiseValue]]);
    return resp.json();
  };

  render() {
    console.log("this.state.noData--->", this.state.noData);
    return (
      <div>
        <input type="text" onChange={this.searchByKeyword} />
        <p
          style={
            {
              // display: this.state.noData ? "" : "none"
            }
          }
        >
          No data found
          <p>clear all</p>
        </p>
        {/* <Scroll />  */}
      </div>
    );

Answer 1

Этого можно добиться с помощью условного рендеринга на JSX .

Измените код на следующий, и он будет работать.

        <SearchBar onFetch={this.onFetch} />
        {this.state.data && this.state.data.length > 0 ? 
        this.state.data.map((item) => <div key={item.objectID}>{item.title}</div>) :
        <p>no data</p>}

Я раздвоил песочницу и здесь