Positioning in Map function React-CodePudding

I have a quick question and I am a little bit stuck. I have an array and I want to use half of the array at one point and half of the array at some other place. So I am using map function and I am a little stuck how can I use positioning in map function. I want to render some part of the array at one point and the other half at other point.

For example I have an array:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

and I want to populate it in two different places.

   array.map((item, index) => {
        return (
        //here i want 1,2,3,4
          <li > item </li>
      })
    }
    
    
    array.map((item, index) => {
        return (
        //here i want 5,6,7,8
          <li > item </li>
      })
    }

CodePudding user response：

You could use .slice to split your array into two arrays then use .map() on each of them, see below

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

const array1 = numbers.slice(0, Math.floor(numbers.length/2))
const array2 = numbers.slice(Math.floor(numbers.length / 2))

console.log(array1)
console.log(array2)

//array1.map(...)
//and..
//array2.map(...)

CodePudding user response：

You can accomplish this two ways: using CSS, or splitting the array in half.

Using CSS

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

const App = () =>
(
  <div className="grid">
    {
      numbers.map((n) => (
        <div>{n}</div>
      ))
    }
  </div>
);

// Render it
ReactDOM.render(<App />, document.getElementById('react'));

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid div {
  display: grid;
  justify-content: center;
}

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

Using JS

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

const splitArr = (arr) =>
  ((half) => [arr.slice(0, half), arr.slice(-half)])
  (Math.ceil(arr.length / 2))


const App = () =>
(
  <div className="flex">
    {
      splitArr(numbers).map((arr) => (
        <div className="row">
          {
            arr.map((n) => (
              <div>{n}</div>
            ))
          }
        </div>
      ))
    }
  </div>
);

// Render it
ReactDOM.render(<App />, document.getElementById('react'));

.flex {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.row {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}

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

CodePudding user response：

in this case you have to use filter. not map
for first part you can use filter like this:

    numbers.filter((it, idx) => {
        return idx < (numbers.length /2) && <li > item </li>
    })

and for second one you can use this:

    numbers.filter((it, idx) => {
        return idx   1 > (numbers.length /2) && it
    })

CodePudding user response：

Do you need something like this?

import React from 'react';

const Home = (props) => {
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
  return(
    <div>
      {numbers.map((item, index) => (index <= numbers.length/2) ? (<li>item</li>):null)}
      {numbers.map((item, index) => (index > numbers.length/2) ? (<li>item</li>):null)}
    </div>
  );
}

export default Home;