this code is working very well but if a person search a doctor using doctor name this time if any doctor name are not match with this input name this time I want to display a message like "Sorry, this name does not exist"

I'm trying but I can't solve the problem. Please give me some advice.

import React, {useState} from 'react';
import Doctordata from './Doctordata'
import { Link } from 'react-router-dom';
import './DoctorSection.css'
const DoctorSection = () => {
  const [data] = useState(Doctordata);
  const [query,setQuery] = useState("");
  document.title = `Our Doctors`
  return (
    <>
   
     <Link to="/"><button className="btnR"> <i className="fa-solid fa-arrow-left"></i> Back to Home</button></Link>
      <div className='search'>
          <input className='searchbox' placeholder="Search by doctor name..." type="text" onChange={e=>setQuery(e.target.value)} />
      </div>


        <div className='wrapper' id="doctor">
            {data.filter((val)=>{
              if(query === null){
                return val
              }
              else if(val.d_name.toLowerCase().includes(query.toLowerCase())){
                return val
              }
              else{
                return false
              }
            
            })
            .map((values) => {
                const { id, src, d_name, d_info, primary } = values;
                return (
                        <div className="doctor" key={id}>
                            <img className="doctor-img" src={src} alt={d_name}/>
                            <span className="d_name"><b>{d_name}</b></span>
                            <span className="d_info">{d_info}</span>
                            <div>
                                   <div><button className="primary" 
                                    onClick={()=>{alert("Call us  now on 000 0000 0000 or 111 1111 1111 for booking an appoimentment")}}>
                                    {primary}</button> </div> 
                            </div>
                        </div>
                );

            })}
        </div>
    
    </>
  )
}

export default DoctorSection

推荐答案

判断filteredData的长度.如果它是0(并且有一个query),那么可以呈现not found消息.

import React, { useState } from "react";
import Doctordata from "./Doctordata";

const DoctorSection = () => {
  const [data] = useState(Doctordata);
  const [query, setQuery] = useState("");

  const filteredData = data.filter(({ d_name }) => {
    if (d_name.toLowerCase().includes(query.toLowerCase())) {
      return true;
    } else {
      return false;
    }
  });

  return (
    <>
      <input
        placeholder="Search by doctor name..."
        type="text"
        onChange={(e) => setQuery(e.target.value)}
      />

      {query && filteredData.length === 0 && (
        <div>Sorry, this name does not exist</div>
      )}

      {filteredData.map(({ id, d_name }) => {
        return <div key={id}>{d_name}</div>;
      })}
    </>
  );
};

export default DoctorSection;

Edit muddy-water-hpd8yt

Javascript相关问答推荐

随着 Safari 中输入文本的变化,输入类型文本下方的 div 上下移动

如何根据属性的总和组织对象数组?

PHP中的搜索功能

在网页上设置搜索功能

用逗号分隔的双向绑定字符串

使用 Frida 重载函数时从列表中删除元素

如何获取html树的#text节点数组

当一次按下超过 2 个键时,p5.js keyIsDown() 行为不一致

迭代对象并替换值

如何对齐左侧、叠加和全高侧导航菜单

这个在 express 中接收 RequestHandler 的函数是如何工作的?

切换暗模式 - 新创建元素的问题

React 审核表单在提交时未提交审核

无法通过单击按钮在 div 内创建 div

'addEventListener' 和 'onclick' 仅适用于 'window' 元素,而不适用于任何其他元素(例如按钮)

如何在下一个 js 中使用组件级 sass 文件

overflow-anchor不适用于水平滚动

TypeError: doc 不是 addSubCollectionDocument 中的函数

从具有相同 id 的元素列表中动态获取特定元素的值

如何在 Svelte 中制作累积过滤系统(如亚马逊侧边栏)