Handling array length in React

April 16, 2022

I have an array of results I’m wanting to render in a table:

const ScanOutput = () => (
  <div class="results">
    <h1>
      <b>Scan Results</b>
    </h1>
    <h3>{results.length} results returned</h3>
    <table class="styled-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        {results.map((result) => (
          <tr>
            <td>{result.id}</td>
            <td>{result.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

This works, but I’d like to add some extra features – for example, if no results are returned (e.g. results.length == 0) I’d like to render "No results found" instead of an empty table. Furthermore, I’d also like to make it so that with this section here:

<h3>{results.length} results returned</h3>

If only 1 result is returned it renders this instead:

<h3>{results.length} result returned</h3>

What’s the cleanest way to do this in React?

>Solution :

You can render conditionally.

<div class="results">
{result?.length > 0 ?
 <>
  <h1>
   <b>Scan Results</b>
  </h1>
  <h3>{results.length} results returned</h3>
  <table class="styled-table">
   {...}
  </table>
 </>
:
 <h1>No results found</h1>
}
</div>