How to Display "No Items Were Found" React.js - reactjs

Question

I have a React.js App where I search pets as below
When the page first loads, I display some text and image. Then user makes a search and gets the results according to the search. But if there is no matching results, I want to display a message as "No Items were found"
How can I do this ?
My if condition is not working in the submit function.
Below is my code
Search.js
import React, { useState } from "react";
import SearchResults from "./SearchResults";
import { Container, Row, Col } from "react-bootstrap";
import { FaSearch } from "react-icons/fa";
import "./Search.css";
import { useFormik } from 'formik';
const Search = ({ searchGuests }) => {
const [searchResults, setSearchresults] = React.useState([])
const formik = useFormik({
initialValues: {
location: "",
age: "",
breed: "",
gender: "",
},
onSubmit: values => {
const searchItem = searchGuests.guestsResults.filter(item => {
return (
item.location
.toLowerCase()
.includes(
values.location.toLowerCase()
) &&
item.age
.toLowerCase()
.includes(
values.age.toLowerCase()
) &&
item.breed
.toLowerCase()
.includes(
values.breed.toLowerCase()
) &&
item.gender
.toLowerCase()
.includes(
values.gender.toLowerCase()
)
)
})
if(searchItem) {
return setSearchresults(searchItem)
} else {
return searchResults("No Items Were Found")
}
// return JSON.stringify(values, null, 2);
},
});
const LoadingPage = () => {
return (
<Col sm={12} className="loadPage">
<h4>Start Searching Now and Discover New Friends</h4>
<h6>They are waiting for their new home</h6>
<img src="https://timesofindia.indiatimes.com/photo/67586673.cms" className="w-100 searchCatLogo" />
</Col>
);
};
return (
<Container>
<Row className="searchContainer py-5">
<h1>{searchGuests.searchGuestsTitle.title}</h1>
<Col sm={12}>
<form onSubmit={formik.handleSubmit} className="searchForm">
<label htmlFor="location"></label>
<select id="location" name="location" value={formik.values.location} {...formik.getFieldProps('location')}>
<option value="Select Location">Select Location</option>
{searchGuests.locationCities.map(city => <option>{city}</option>)}
</select>
<label htmlFor="age"></label>
<input
id="age"
type="text"
placeholder="age"
{...formik.getFieldProps('age')}
/>
<label htmlFor="breed"></label>
<select id="breed" name="breed" value={formik.values.breed} {...formik.getFieldProps('breed')}>
<option value="Select Breed">Select Breed</option>
{searchGuests.searchBreed.map(breed => <option>{breed}</option>)}
</select>
<label htmlFor="gender"></label>
<select name="gender" value={formik.values.gender} {...formik.getFieldProps('gender')}>
<option value="Select Gender">Select Gender</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
</select>
<button type="submit">
<FaSearch size={27} className="searchIcon" />
</button>
</form>
</Col>
<Col sm={12}>
<Row className="mt-5 items">
{searchResults.length > 0 ? searchResults.map(result => {
return (
<SearchResults
key={result.id}
img={result.img}
location={result.location}
age={result.age}
breed={result.breed}
gender={result.gender}
name={result.name}
/>
)
}) : <LoadingPage />}
</Row>
</Col>
</Row>
</Container>
);
};
export default Search;
SearchResults.js
import React, { useState } from "react";
import { Col, Button, Card } from "react-bootstrap";
import "./Search.css";
import { BsGeoAlt } from "react-icons/bs";
import { FaPaw } from "react-icons/fa";
import AdoptionFormModal from "./AdoptionFormModal"
const SearchResults = ({ img, id, location, age, breed, gender, name }) => {
const [modalShow, setModalShow] = useState(false);
return (
<>
<Col lg={4} className="mb-5">
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={img} />
<Card.Body id="modalBody">
<Card.Text id="cardText">
<div className="firstDiv">
<p>{breed}</p>
<p>{name}</p>
<Button variant="primary" className="adoptButton shadow-none" onClick={() => setModalShow(true)}>
<FaPaw className="pawIcon"/>
Adopt
</Button>
</div>
<div className="secondDiv">
<p>{gender}, {age}</p>
<p className="mt-4"><BsGeoAlt size={25}/> {location}</p>
</div>
</Card.Text>
</Card.Body>
</Card>
</Col>
<AdoptionFormModal
show={modalShow}
onHide={() => setModalShow(false)}
/>
</>
);
};
export default SearchResults;
data.js
export let searchGuests = {
searchGuestsTitle: {
title: "Adopt Your New Pet",
},
guestsResults: [
{
id: 1,
img:
"https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F37%2F2020%2F09%2F22%2F50-cute-dog-names.jpg",
location: "Istanbul",
age: "2",
breed: "Poodle",
gender: "Female",
name: "Sushi",
},
{
id: 2,
img:
"https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F37%2F2020%2F09%2F22%2F50-cute-dog-names.jpg",
location: "Istanbul",
age: "1",
breed: "Terrier",
gender: "Male",
name: "Sushi",
},
{
id: 3,
img:
"https://imagesvc.meredithcorp.io/v3/mm/image?url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F37%2F2020%2F09%2F22%2F50-cute-dog-names.jpg",
location: "Istanbul",
age: "2",
breed: "Poodle",
gender: "Female",
name: "Sushi",
},
],
locationCities : [
"Istanbul",
"Ankara",
"Izmir"
],
searchBreed : [
"Poodle",
"Terrier",
"Rottweiler",
"Golden Retriever",
"Cat",
"Tobby cat",
"Scottish"
],
searchAge : [
"<3",
">3",
"All"
]
};

Answer 1

You can render it based on the type of searchResults is a string or array
{/* Show result */}
{searchResults.length > 0 &&
Array.isArray(searchResults) &&
searchResults.map((result) => {
return (
<SearchResults
key={result.id}
img={result.img}
location={result.location}
age={result.age}
breed={result.breed}
gender={result.gender}
name={result.name}
/>
);
})}
{/* Show notfound */}
{searchResults.length > 0 && typeof searchResults === "string" && (
<div>{searchResults}</div>
)}
{/* Show loading */}
{searchResults.length === 0 && <LoadingPage />}
if(searchItem.length > 0) {
return setSearchresults(searchItem)
} else {
return searchResults("No Items Were Found")
}

Answer 2

First: You are directly mutated the state, so your component won't re-render:
return searchResults("No Items Were Found")
And also it's inefficient to save error state the same state you store your response, so create another state for that:
const [error, setError] = React.useState('')
And then set your error like this:
setError("No Items Were Found")
return;
Lastly, check for the existent of error and render it:
{error && <p>{error}</p>