search filter in react js-CodePudding

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

CodePudding user response：

Check the length of the filteredData. If it is 0 (and there is a query), then you can render the not found message.

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;