Render elements with a wrapper from a map function in react

Question

I have a react component that I need to render a bunch of elements based on the items in an array. I've setup a function to render over all of them in the array and it works nicely. Now I want to split the rendered elements into two different wrapper elements. I tried a few ways of doing this using if statements and switches but my code was getting really messy. I wanted to see if there is a cleaner way to do this, that someone might know.

  renderSplit(key) {
    return <div className={`inner_${key}`} key={key}>{`inner_${key}`}</div>;
  }

  render() {
    const { arr } = this.props;
    return (
      <div>
        {arr.map(this.renderSplit)}
      </div>
    );
  } 

So if I have an array of 5 items I want the first 4 that get rendered by renderSplit to be wrapped in a container <div className='left'>.....</div> and the last item in the array to be wrapped in another wrapper <div className='right'>....</div> If there is only one item, in the array it doesn't get wrapped by any wrapper div.

Answer 1

It should be arr.map not body.map next comes pass in the array . Then invoke the function

do this:

 renderSplit(arr) {
    return arr.map((entry,index)=>
             <div className={`inner_${entry}`} key={entry}>{`inner_${entry}`}</div>;
         )
      }

  render() {
    const { arr } = this.props;
    return (
      <div>
        {this.renderSplit(arr)}
      </div>
    );
  } 

you can input a condition(with respect to the index) inside the map statement , to satisfy the last statement

Answer 2

you can use destructuring assignment to extract the first elements and the last one from the array, check if the last one exists, if it doesn't, that means the array has only one entry, and render accordingly :

 renderSplit(key) {
    return <div className={`inner_${key}`} key={key}>{`inner_${key}`}</div>;
  }

  render() {
    const { arr } = this.props;
    const [last, ...firstElems ] = arr.reverse(); // reverse the array to get the last element and use the spread operator to get the rest.

    return (
      firstElems.length > 0  // if you have elements in the firstElems array 
        ? ( 
        <div className="wrapper">
          <div className="left">{firstElems.reverse().map(this.renderSplit)}</div> // reverse the firstElems array to display it in the right order.
          <div className="right">{this.renderSplit(last)}</div> // render the last element.
        </div> 
        )
        // other wise, render the single element you have.
        : <div className="singleElement">{this.renderSplit(last)}</div> 
    );
  } 

Answer 3

Let's see:

  renderSplit(key) {
    return <div className={`inner_${key}`} key={key}>{`inner_${key}`}</div>;
  }

  render() {
    const { arr } = this.props;

    if(!arr || !arr.length) { return null; }

    if(arr.length === 1) { return renderSplit(arr[0]); }

    const left = arr.slice(0, arr.length - 2);
    const right = arr[arr.length -1];
    // Or else: 
    // const rightElement = arr.pop(); const leftElements = arr;

    return (
      // or <React.Fragment>
      <>
        <div className="left">
          {leftElements.map(this.renderSplit)}
        </div>
        <div className="right">
          {this.renderSplit(rightElement)}
        </div>
      </>       
    );
  }