You might consider filtering the members you want to display first, then displaying the length of the resulting array, and mapping over it to render the members:

Fiddle

render() {
    const membersToRender = this.state.members.filter(member => member.display)
    const numRows = membersToRender.length

    return (
      <div>
        <p>Number of rows = {numRows}</p>
        {
          membersToRender.map((member, index) => {
            return <p key={index}>{ member.name }</p>
          })
        }
      </div>
    );
  }

Edit: Thanks Edgar Henriquez, I fixed the key properties warning as you suggested

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>

You can use Array#fill

const arr = Array(20).fill(1)
console.log(arr)

This will not be fixed as you can't fix an array's length, but you can do according checks in order not to push anything to this array once created. You can create a fixed Object however, using Object.seal

UPDATE:

Apparently, you can use Object.seal() on arrays too:

const object1 = Array(10).fill(0)

Object.seal(object1);
object1[2] = 24;
console.log(object1)

object1.push(8)
console.log(object1)

object1.pop()
console.log(object1)

And if you use Object.freeze() it also doesn't allow any changes in the array. You can still change the values of indices using seal()

You can use Array#fill

const arr = Array(20).fill(1)
console.log(arr)

This will not be fixed as you can't fix an array's length, but you can do according checks in order not to push anything to this array once created. You can create a fixed Object however, using Object.seal

UPDATE:

Apparently, you can use Object.seal() on arrays too:

const object1 = Array(10).fill(0)

Object.seal(object1);
object1[2] = 24;
console.log(object1)

object1.push(8)
console.log(object1)

object1.pop()
console.log(object1)

And if you use Object.freeze() it also doesn't allow any changes in the array. You can still change the values of indices using seal()

Because this.state.items starts out as an empty array (which is strange, since later on it looks like its an object) You first need to make sure this.state.items.content is defined

Do it like this:

console.log(this.state.items.content && this.state.items.content.length);

Or in your actual case

if(this.state.items.content && this.state.items.content.length > 0){
    //access values from this.state.items
}

Hope this helps

Instead of storing a separate variable for the length of the items array, you can use this.state.items.length directly in the render method.

render() {
  return <div>Total Items {this.state.items.length}</div> 
}

class App extends React.Component {
  state = {
    items: []
  };

  addItem = () => {
    this.setState(({ items }) => ({ items: [...items, Math.random()] }));
  };

  render() {
    return (
      <div>
        <div>Total Items {this.state.items.length}</div>
        <button onClick={this.addItem}>Add item</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

You can definetly add whatever validation to your array and it's items using resolvers
Example with Zod

const itemSchema = z.object({
  id: string().uuid(),
  name: string().optional()
})

const formSchema = `.object({
  array: z.array(itemSchema).min(5, "Please, add at least 5 items")
})

When it comes to displaying the array error errors.array?.message, the field is there, but ATM RHF has the TS limitation to correctly assert it's path. So, the only way is to @ts-expect-error