I want to convert below for loop into array.map() but not sure how to

Question

OtpInput is another component and OTPLength is props obtained from parent component and is neccessary.

{
    const otp = getOtpValue()
    const inputs = []

    for (let index = 0; index < OTPLength; index++) {
      inputs.push(
        <Input
          key={index}
          focus={activeInput === index}
          value={otp[index]}
          onChange={handleOnChange}
          onKeyDown={handleOnKeyDown}
          onInput={handelOnInput}
          onInputFocus={onInputFocus}
          index={index}
          secure={secure}
          invalid={invalid}
          autoFocus={autoFocus}
        />
      )
    }

    return inputs
}

Have tried and changed the below way, but i am getting only one input instead of the value passed in OTPLength as props and then used to create a new Array based on OTPLength.

const renderInputs = useMemo(() => {
    const otp = getOtpValue()
    const inputs = new Array(OTPLength)
    return [...inputs].map((_,index) =>
            <Input
                key={index}
                focus={activeInput === index}
                value={otp[index]}
                onChange={handleOnChange}
                onKeyDown={handleOnKeyDown}
                onInput={handelOnInput}
                onInputFocus={onInputFocus}
                index={index}
                secure={secure}
                invalid={invalid}
                autoFocus={autoFocus}
              />
            )
  }, [
    getOtpValue,
    OTPLength,
    activeInput,
    handleOnChange,
    handleOnKeyDown,
    handelOnInput,
    onInputFocus,
    autoFocus,
    invalid,
    secure
  ])

Answer 1

You don't even need map() , you may simply do:

const inputs = Array.from({length: OTPLength}, (_,i) => 
    <Input 
        key={i} 
        focus={activeInput == i} 
        /* the rest of your props */ 
    />
)

Or, if you still prefer map() :

const inputs = [...Array(OTPLength)].map((_,i) => 
    <Input 
        key={i} 
        focus={activeInput == i} 
        /* the rest of your props */ 
    />
)

Answer 2

Simply iterate over an empty Array() , the second parameter of map() refers to the current index

    const myArray = [...new Array(OTPLength)].map((obj, i)=> (
      <Input
        key={index}
        focus={activeInput === i}
        value={otp[i]}
        onChange={handleOnChange}
        onKeyDown={handleOnKeyDown}
        onInput={handelOnInput}
        onInputFocus={onInputFocus}
        index={index}
        secure={secure}
        invalid={invalid}
         autoFocus={autoFocus}
       />
));

Answer 3

The below code creates an array the same size as OTPLength and returns an array of Input elements

let otpArray = new Array(OTPLength);
return [...otpArray].map((element, index) => (
   <Input
       key={index}
       focus={activeInput === index}
       value={otp[index]}
       onChange={handleOnChange}
       onKeyDown={handleOnKeyDown}
       onInput={handelOnInput}
       onInputFocus={onInputFocus}
       index={index}
       secure={secure}
       invalid={invalid}
       autoFocus={autoFocus}
   />
))

Answer 4

This should work,

const renderInputs = useMemo(() => {
const otp = getOtpValue()
const inputs = new Array(OTPLength)
let ret = inputs.map((_,index) =>
        <Input
            key={index}
            focus={activeInput === index}
            value={otp[index]}
            onChange={handleOnChange}
            onKeyDown={handleOnKeyDown}
            onInput={handelOnInput}
            onInputFocus={onInputFocus}
            index={index}
            secure={secure}
            invalid={invalid}
            autoFocus={autoFocus}
          />
        );
        return ret;
 }, [
getOtpValue,
OTPLength,
activeInput,
handleOnChange,
handleOnKeyDown,
handelOnInput,
onInputFocus,
autoFocus,
invalid,
secure
])