Handling array length in React

Question

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?

J young · Accepted Answer · 2022-04-16 08:18:10Z

1

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>

edited Apr 16, 2022 at 8:18

answered Apr 16, 2022 at 8:07

J young

2452 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

flowermia Over a year ago

Thank you, this answers half the question but how would I also do this for all 3 possibilities? e.g. length = 0, length = 1, length > 1? I want to render the table length = 1 or length > 1 but another message if not.

J young Over a year ago

I already teach u everything tho, but i just edited now

Andrei Stoica · Accepted Answer · 2022-04-16 08:14:31Z

0

You can create a new component for the results table

const ResultsTable = ({ results }) => {
  if (results?.length === 0) return <h3>No results found</h3>;
  if (results?.length === 1) return ...;

  return (
    <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>
  )
}

answered Apr 16, 2022 at 8:14

Andrei Stoica

4372 silver badges6 bronze badges

Collectives™ on Stack Overflow

Handling array length in React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related