NextJS, button, onClick, show, hide, no data found

[Fred638]

Body

How to show a "No data found" when map length = 0 alert or notification? The button has a handle submit function that fires when the button is clicked.

Submit function
const handleSubmit = async (e: React.FormEvent) => {...

Button
<button onClick={handleSubmit} ...

Results array
return (<div> {results.length ? (results.map... ) : (<div>No data found!</div>)} <-- should only show up when no data is found.

Guidelines

• I have read and understood this category's guidelines before making this post.

[protheeuz]

Hi @Fred638, this suggestion to you.. So if I understand correctly, you want the "No data found" message to only appear after the button is clicked and the results come back empty, not before?

If that's the case, you probably need to track whether a search has been performed. Try adding a state like this:

const [hasSearched, setHasSearched] = useState(false);

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  setHasSearched(true);
  // ... your existing fetch logic
}

return (
  <div>
    {hasSearched && results.length === 0 ? (
      <div>No data found!</div>
    ) : (
      results.map(...)
    )}
  </div>
)

This way the "No data found" message only shows up after someone actually clicks the button and gets zero results, not on initial page load.
Is that what you're trying to do?

[Fred638]

Hi @protheeuz, Thanks for pointing out! Yes, this is what I am looking for. I think this is a widely used feature in many applications, so it is nothing unusual. Just implementing it correctly can be an issue.