How to map an index range in react?

Question

<table>
   <tbody>
   {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
   </tbody>
</table>

This maps my entire array, but how would I map from a minimum index to a maximum index? So say my array has 500 elements. I want to map this array (of data) from index 15 to 24 inclusive. (So I'd only have 10 elements on my screen).

edit: these answers are interesting.. but no mention of .filter() though? I saw that it might help what I want but I'm trying to figure out how to do it in react.

Solution 1

Use Array#slice() to extract a shallow copy of the values you want from this.state.data.

const SubsetTable = props => {
  let {startIndex, endIndex, data} = props

  let subset = data.slice(startIndex, endIndex)

  return (
   <table>
     <tbody>
       {subset.map((person, i) => (<TableRow key = {i} data = {person} />)}
     </tbody>
   </table>
  )
}

// Since splice() is inclusive of the range given, you'll need to 
// adjust your range to include that last index if needed
// The below will grab all values in indexes 15-24, 
<SubsetTable startIndex={15} endIndex={25} data={this.state.data} />

Since you've updated your question, regarding use of Array#filter(), filter() requires that you iterate over the entire set. Array#slice() is only going to extract the contiguous index range that you'd like extract. filter() is better when you gave a condition that you want all your Array data members to meet and and your collection is unordered.

Solution 2

However you set the min/max (let's assume state)

this.state = {
    min: 15,
    max: 24,
};

You just adjust your map to an if statement to return if the index (i) is greater than or equal to the min, and less than or equal to the max.

{this.state.data.map((person, i) => {
    if (i >= this.state.min && i <= this.state.max) {
        return (<TableRow key = {i} data = {person} />);
    }
})}

Now, we can be real here and say this is inefficient. So, after you have reached the max, break out of the loop, which may require a different loop type since I think you can't break from a map

Solution 3

The problem here is that Array.prototype.map must return the exact same length of the array.
So you need to do some filtering and mapping again.

To minimize the number of loops and iterations, i would use Array.prototype.reduce, which will let you do both filtering and mapping in the same iteration.

Running example:

const persons = [
  { value: 'John', id: 1 },
  { value: 'Jane', id: 2 },
  { value: 'Mike', id: 3 },
  { value: 'Nikol', id: 4 },
  { value: 'Bob', id: 5 },
  { value: 'Dave', id: 6 },
]

const TableRow = ({ data }) => <tr><td>{data.value}</td></tr>

const start = 2;
const end = 4;

const App = () => (
  <div >
    <table>
      <tbody>
        {
          persons.reduce((result, current, i) => {
            if (i >= start && i <= end) { // 0 based don't forget!
              const row = (<TableRow key={i} data={current} />);
              result.push(row);
            }
            return result;
          }, [])
        }
      </tbody>
    </table>
  </div>
);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>