Skip to content

Get size of array returned by map in React render

I’m using in my render method of a React component. It works but I want to know how many rows it’s rendering. I’m trying by initialising this.numRows = 0 in my constructor, then incrementing it in the map callback:

        <p>Number of rows = {this.numRows}</p>
        { => {
          if (member.display) {
            return <p>{ }</p>  

But this is still showing zero. Full code here: How can I show the number of rows returned?



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:


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

    return (
        <p>Number of rows = {numRows}</p>
, index) => {
            return <p key={index}>{ }</p>

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

User contributions licensed under: CC BY-SA
3 People found this is helpful