Tengo problemas con React js. Estoy implementando la función de búsqueda. Todo está bien, pero quiero mostrar si el término ingresado en la barra de búsqueda no está disponible. Debería mostrar "No se encontraron datos". También adjunto la captura de pantalla.
Componente de búsqueda
const UserDetails = () => { const [posts, setPosts] = useState([]); const [searchTerm, setSearchTerm] = useState(""); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setPosts(data.results)); }, []); return ( <> <div className="Navbar"> <img className="logo" src={logo} alt="" /> <input type="text" onChange={(event) => { setSearchTerm(event.target.value); }} placeholder="Search User.." ></input> </div> <div className="card"> {posts.length > 0 ? ( posts .filter((val) => { if (searchTerm === "") { return val; } else if ( val.name.first .toLowerCase() .includes(searchTerm.toLowerCase()) || val.name.last.toLowerCase().includes(searchTerm.toLowerCase()) ) { return val; } }) .map((post, index) => <Userdetail key={index} post={post} />) ) : ( <div className="loading"> <img src={logo} className="App-logo" alt="logo" /> <p className="loading-data">Loading Data...</p> </div> )} </div> </> ); }; export default UserDetails;Está verificando si las posts tienen valores, y si no es así, debería mostrar loading div. Este es el lugar donde debe agregar "No se encontraron datos" y para la carga debe establecer el estado para indicar el estado de carga.
He modificado un poco tu código.
const UserDetails = () => { const [posts, setPosts] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const [loading,setLoading] = useState(false) // loading state useEffect(() => { setLoading(true); // loading started fetch(url) .then((res) => res.json()) .then((data) => { setPosts(data.results); setLoading(false); // loading stopped }) .catch((e) => { setLoading(false); // loading stopped console.log(e); }); }, []); return ( <> <div className="Navbar"> <img className="logo" src={logo} alt="" /> <input type="text" onChange={(event) => { setSearchTerm(event.target.value); }} placeholder="Search User.." ></input> </div> <div className="card"> {loading ? ( // loading state <div className="loading"> <img src={logo} className="App-logo" alt="logo" /> <p className="loading-data">No data</p> </div> ) : posts.length > 0 ? ( posts .filter((val) => { if (searchTerm === "") { return val; } else if ( val.name.first .toLowerCase() .includes(searchTerm.toLowerCase()) || val.name.last.toLowerCase().includes(searchTerm.toLowerCase()) ) { return val; } }) .map((post, index) => <Userdetail key={index} post={post} />) ) : ( <p>No data found!</p> )} </div> </> ); }; export default UserDetails;