Mirando su código, el problema es que está filtrando en cada componente <Order> individual. El filtrado debe realizarse en el componente principal Orders y solo debe representar un componente <Order> si se encuentra una coincidencia.

Actualmente, su componente <Order> se está procesando, incluso si no hay ninguna coincidencia.

En mi opinión, lo primero que debe pensar es qué datos necesita y cuándo los necesita. Para no mostrar los resultados que desea, necesitará el nombre de los trabajadores en el componente que realiza el filtrado. Entonces lo necesitaría en el componente de pedidos. Fusionaría los datos del trabajador con los datos del pedido y luego puede filtrar y manipular los datos después de eso. Eso también evitaría que realice una solicitud de API cada vez que alguien cambie la entrada y todo lo que necesita hacer es filtrar los datos ya obtenidos. Luego, puede verificar la longitud de la matriz y, si es mayor que 0, puede mostrar los resultados; de lo contrario, mostrar una declaración sin resultados.

Entonces algo como lo siguiente:

Componente de pedidos

 import React, { useEffect, useState } from "react"; import "./Orders.css"; import Order from "./Worker"; import axios from "axios"; const Orders = () => { const [orders, setOrders] = useState([]); const [results, setResults] = useState([]); const [searchedWorker, setSearchedWorker] = useState(""); const getOrders = async () => { const workOrders = await axios.get( "https://api.hatchways.io/assessment/work_orders" ); const mappedOrders = await Promise.all(workOrders.data.orders.map(async order => { const worker = await axios.get( `https://api.hatchways.io/assessment/workers/${order.workerId}` ); return {...order, worker: worker.data.worker} })) setOrders(mappedOrders); }; useEffect(() => { getOrders(); }, []); useEffect(() => { const filtered = orders.filter(order => order.worker.name.toLowerCase().includes(searchedWorker)); setResults(filtered) }, [searchedWorker, orders]) return ( <div> <h1>Orders</h1> <input type="text" name="workerName" id="workerName" placeholder="Filter by workername..." value={searchedWorker} //property specifies the value associated with the input onChange={(e) => setSearchedWorker(e.target.value.toLowerCase())} //onChange captures the entered values and stores it inside our state hooks //then we pass the searched values as props into the component /> <p>Results: {results.length}</p> {results.length > 0 ? results.map((order) => ( <Order key={order.id} lemon={order} /> )) : <p>No results found</p> } </div> ); }; //(if this part is true) && (this part will execute) //is short for: if(condition){(this part will execute)} export default Orders;

Entonces puede simplificar su componente de pedido único

 import React from "react"; const Order = ({ lemon }) => { return ( <div> <div className="order"> <p>Work order {lemon.id}</p> <p>{lemon.description}</p> <img src={`${lemon.worker.image}`} alt="worker" /> <p>{lemon.worker.name}</p> <p>{lemon.worker.company}</p> <p>{lemon.worker.email}</p> <p>{new Date(lemon.deadline).toLocaleString()}</p> </div> </ div> ); }; export default Order;

Puede agregar un estado en Orders.js para contar cuántos elementos se presentan. Sin embargo, dado que cada Worker depende de una llamada a la API, debe tener la respuesta (getWorker, en Workers.js) y esperar la respuesta para realizar el conteo. Cada vez que cambie el valor de entrada, debe restablecer el contador a 0.

https://codesandbox.io/s/fe-hatc-ass-search-forked-elyjz?file=/src/Worker.js:267-276

Además, como comentario, es más seguro poner las funciones que se ejecutan en useEffect, dentro de useEffect, de esta manera es más fácil ver si te falta una dependencia.