How can I create a numeric array based on the number of array objects in React?

Question

I have an array object called members?.admins. I want to create an array of numbers based on the length of members?.admins.

As an exception, if the length of members?.admins is 1 to 5, [1] should be given as the default value. That is, the default value must be unconditionally [1].

If the number of members?.admins is 5, I want to make [1] in numbers, and if there are 10, I want to make [1,2]. Also, if there are 11, it should be [1,2]

At this time, I want to use useEffect to setNumbers on the first render to create an array of numbers in numbers.

How can I do that?

const members?.admins = [{memberId:"21",name:"jack21"},{memberId:"20",name:"jack20"},{memberId:"14",name:"jack14"},{memberId:"13",name:"jack13"},{memberId:"11",name:"jack11"},{memberId:"10",name:"jack10"},{memberId:"7",name:"jack7"},{memberId:"4",name:"jack4"},{memberId:"3",name:"jack3"},{memberId:"2",name:"jack2"},{memberId:"1",name:"jack1"}];
const [numbers, setNumbers] = useState([1]);

useEffect(() => {
  setNumbers();
}, []);

Expected output:

  if members?.admins.length =  1~5
    it shuld be 
    number = [1]
    
    if members?.admins.length = 6~10
    it shuld be 
    number = [1,2]

    if members?.admins.length = 11~15
    it shuld be 
    number = [1,2,3]

Can you please edit the question to provide a list of inputs and the expected outputs for a range of values. — Rory McCrossan
– Rory McCrossan, Commented Oct 4, 2022 at 11:10

Łukasz Karczewski · Accepted Answer · 2022-10-04 11:25:40Z

1

let members = {admins: [1,2,3,4,5,6,7,8,9,10]}

console.log(Array(Math.ceil((members?.admins.length || 0) / 5)).fill(undefined).map((el, i) => i + 1))

answered Oct 4, 2022 at 11:25

Łukasz Karczewski

1,20811 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Okan Karadag · Accepted Answer · 2022-10-04 11:28:10Z

1

let admins = ["a","b","c","d","e","f","g"];
let result = Array.from({length: Math.ceil(admins.length / 5)}, (_, i) => i + 1);
console.log(result);

answered Oct 4, 2022 at 11:28

Okan Karadag

3,1051 gold badge16 silver badges27 bronze badges

Comments

criccode · Accepted Answer · 2022-10-04 11:29:36Z

1

You can use Math.ceil to get the required length and then fill the array later.

const members = {
  admins: Array(6)
}

const reqLength = Math.ceil(members?.admins?.length / 5);

const reqArray = Array(reqLength).fill().map((v, i) => i + 1);
console.log(reqArray);

answered Oct 4, 2022 at 11:29

criccode

1461 silver badge7 bronze badges

Comments

The Scalion · Accepted Answer · 2022-10-04 11:31:09Z

1

Here you can create array using length

useEffect(() => {
  const array = [...Array(Math.ceil( members?.admins.length / 5))].map((_, i)=> i+1)
  setNumbers(array);
}, []);

edited Oct 4, 2022 at 11:31

answered Oct 4, 2022 at 11:25

The Scalion

1497 bronze badges

Comments

Hans Murangaza DRCongo · Accepted Answer · 2022-10-04 11:28:53Z

const members?.admins = [{memberId:"21",name:"jack21"},{memberId:"20",name:"jack20"},{memberId:"14",name:"jack14"},{memberId:"13",name:"jack13"},{memberId:"11",name:"jack11"},{memberId:"10",name:"jack10"},{memberId:"7",name:"jack7"},{memberId:"4",name:"jack4"},{memberId:"3",name:"jack3"},{memberId:"2",name:"jack2"},{memberId:"1",name:"jack1"}];
const [numbers, setNumbers] = useState([1]);

useEffect(() => {
    let number = [];
    let mb_length = members?.admins.length;
    if(mb_length%5 === 0){
        let mbb = (mb_length - mb_length%5)/5;
        number = Array.from({length: mbb}, (_, i) => i + 1)
    }else{
        let mbb = (mb_length - mb_length%5)/5;
        number = Array.from({length: mbb+1}, (_, i) => i + 1)
    }
    
    
  setNumbers(number);
}, []);

Collectives™ on Stack Overflow

How can I create a numeric array based on the number of array objects in React?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related