JS - React - map() method filter on element index (only run if index meets condition)

Question

I've got a list I want to iterate trough. And based on it's index it should do something. it filters it on:

• if index == 0
• if index is above 0 && lower than half array.length
• if index is above half array.length

Right now I have the following code. And it is working. But it's not effecient. Since it iterates though the entire array 3 times. Is there a way to filter this?

Core of the problem:

            block.blockGrid.map((blockItem, index) => {
              if (index > 0 && index <= (newArrayLength / 2)) {
                <BlockGridElementFirstHalf key item={blockItem} index={index}/>
              }
            })

Entire code:

class BlockGrid extends React.Component {

    render() {
      let {block} = this.props;

      const newArrayLength = (block.blockGrid.length % 2 === 0) ? block.blockGrid.length : block.blockGrid.length + 1;

      return (
        <React.Fragment>

          <Row>

            <Col xs={6}>
              {/*only run element 0 */}
              {block.blockGrid &&
              block.blockGrid.map((blockItem, index) => {
                if (index === 0) {
                  return <BlockGridElementZero key item={blockItem} index={index}/>
                }
              })}

              {/* only run element from 1 to half of length */}
              {block.blockGrid &&
              block.blockGrid.map((blockItem, index) => {
                if (index > 0 && index <= (newArrayLength / 2)) {
                  <BlockGridElementFirstHalf key item={blockItem} index={index}/>
                }
              })}
            </Col>

          </Row>

          <Row>

            <Col xs={6}>

              {/* only run element from half of length up to last */}
              {block.blockGrid &&
              block.blockGrid.map((blockItem, index) => {
                if (index > (newArrayLength / 2)) {
                  <BlockGridElementLastHalf key item={blockItem} index={index}/>
                }
              })}

            </Col>

          </Row>
        </React.Fragment>
      )
    }
  }

Answer 1

Can you check this code snippet ? https://stackblitz.com/edit/react-ygwbah

You can filter a map like this:

myArray
    .filter((el, i) => (i === 0 ))
    .map((element, index) => {
      // do my code
    })
  }

Answer 2

Try this and let me know if this helps. It will iterate through your items only once -

 class BlockGrid extends React.Component { 
    render() {
      let row1 = [], row2 = [];
      block.blockGrid && block.blockGrid.forEach((element, i) => {
        if (i == 0) {
          rows1.push(<BlockGridElementZero key item={blockItem} index={i} />);
        }
        else if (i > 0 && i <= (newArrayLength / 2) {
          rows1.push(<BlockGridElementFirstHalf key item={blockItem} index={i} />);
        }
        else {
          rows2.push(<BlockGridElementLastHalf key item={blockItem} index={i} />);
        }
      });
      return (
        <>
          <Row>
            <Col xs={6}>
              {row1}
            </Col>
          </Row>
          <Row>
            <Col xs={6}>
              {row2}
            </Col>
          </Row>
        </>
      );
    }
  }