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>
})
}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(...)You can accomplish this two ways: using CSS, or splitting the array in half.
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>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>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
})