how to display "No Data Found" when user type wrong name in input field which is not in API in React

Question

Here I want to show that if user types incorrect name input field then it displays "No Data Found". The name that the user will type in the input field(Search option) so that only matching data with that name is shown, for this I use Filter, and it works fine, But the problem is if user types incorrect name in input field then I want to displays "No Data Found" so for this I pass NULL value in map and give a condition

data==null ? (

NO Data Found

) : (...)

But this is not work, so please help me to solve this problem.

Body.jsx -- Here by the help of props taking the data which users type in input field

import React, { useState, useEffect } from "react";
import "../css/body.css";
import Home from "./Home.jsx";


const Body = (props) => {
  const [user, setUser] = useState([]);
  const [loading, setLoading] = useState(false);
 

  useEffect(() => {
    setLoading(true)
    fetch("https://randomuser.me/api/?results=15")
      .then((res) => {
        return res.json();
      })
      .then((data) => {     
        let result = data.results;
        console.log(result);
        setUser(result);
        setLoading(false);
      },
      (error) => {
        console.log(error);
      }
      );
  }, []);


  return (
    <>
      {
        loading ? (<Home/>) :
       (   
      <div className="main">
        { 
         
          user.filter((value) => {
          let x= value.name.first+" "+value.name.last;
          
          if(props.searching === "")
            return value;
          else if(x.toLowerCase().includes(props.searching.toLowerCase()))
               return value;
          else
             return null;
         }).map((data,index) => (
           
           data==null ? (
             <h1>NO Data Found</h1>
          ) : (
          <div className="card" key={index} >
            <div className="card__body">
              <div className="picture">
                <img src={data.picture.large} />
              </div>
              <span>{data.nat}</span>
              <div className="p">
                <h3 className="card__title">
                  {data.name.title +
                    ". " +
                    data.name.first +
                    " " +
                    data.name.last +
                    " | " +
                    data.dob.age}
                </h3>

                <h4 className="card__email">{data.email}</h4>
                <p className="card__text">
                  {data.location.street.number +
                    data.location.street.name +
                    "," +
                    data.location.city +
                    "," +
                    data.location.state +
                    "," +
                    data.location.country +
                    "," +
                    data.location.postcode}
                </p>
              </div>
            </div>
          </div>
           )
        ))

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

  
 
};

export default Body;

Answer 1

Here fixed that for you, with some cleanup:

import React, { useState, useEffect } from "react";
import "../css/body.css";
import Home from "./Home.jsx";


const Body = (props) => {
  const [user, setUser] = useState([]);
  const [loading, setLoading] = useState(false);
 

  useEffect(() => {
    setLoading(true)
    fetch("https://randomuser.me/api/?results=15")
      .then((res) => {
        return res.json();
      })
      .then((data) => {     
        let result = data.results;
        setUser(result);
        setLoading(false);
      },
      (error) => {
        console.log(error);
      }
      );
  }, []);


  if(loading){
    return <Home/>
  }

  const filteredUser = user.filter((value) => {
          let x = value.name.first + " " + value.name.last;
          
          if(!props.searching || x.toLowerCase().includes(props.searching.toLowerCase()))
            {
              return true; // you have to return true or false, to include or exclude the value while filtering
            }else{
              return false;
            }
         })


  return 
      <div className="main">
      {!filteredUser.length ? 
        <h1>NO Data Found</h1>:
        <>{filteredUser.map((data,index) => (<User index = {index} data= {data} />))}}</>
      </div> 
 
};


function User({index, data}) {
  return  <div className="card" key={index} >
            <div className="card__body">
              <div className="picture">
                <img src={data.picture.large} />
              </div>
              <span>{data.nat}</span>
              <div className="p">
                <h3 className="card__title">
                  {data.name.title +
                    ". " +
                    data.name.first +
                    " " +
                    data.name.last +
                    " | " +
                    data.dob.age}
                </h3>

                <h4 className="card__email">{data.email}</h4>
                <p className="card__text">
                  {data.location.street.number +
                    data.location.street.name +
                    "," +
                    data.location.city +
                    "," +
                    data.location.state +
                    "," +
                    data.location.country +
                    "," +
                    data.location.postcode}
                </p>
              </div>
            </div>
          </div>
}