How to Paste multiple numbers and split between all inputs

I am struggling with the current situation:

I have 1 single input where I paste data like this:

96 101 115 145 191 276 412 551 511 552

I convert it into an array and save to Database.

Would love to refactor it in 11 different inputs because is way easier to modify.

How could I paste all thoose numbers into the first input and fill all of them splitting in the space?

My first attemp was this:

import { useState } from "react"

const MultipleInputs = () => {

    const [form, setForm] =useState({})

    const handleForm = (e) => {
        setForm({...form, [e.target.name]:e.target.value})
    }
    const splitOnCopy = (e) => {
        const data = e.target.value
        const newArray = data.trim().split(/\s/)
        setForm({
            y1: newArray[0],
            y2: newArray[1],
            y3: newArray[2],
            y4: newArray[3],
            y5: newArray[4],
            y6: newArray[5],
            y7: newArray[6],
            y8: newArray[7],
            y9: newArray[8],
            y10: newArray[9],
            ttm: newArray[10]
        })
  
    }

  return (
    <div className="input-container">
        <input onPaste={splitOnCopy} onChange={handleForm}   value={form.y1} type="text" name="y1"></input>
        <input onChange={handleForm} type="text"  value={form.y3} name="y3"></input>
        <input onChange={handleForm} type="text" value={form.y4}  name="y4"></input>
        <input onChange={handleForm} type="text"value={form.y5}   name="y5"></input>
        <input onChange={handleForm} type="text" value={form.y6}  name="y6"></input>
        <input onChange={handleForm} type="text" value={form.y7}  name="y7"></input>
        <input onChange={handleForm} type="text"  value={form.y8} name="y8"></input>
        <input onChange={handleForm} type="text" value={form.y9}  name="y9" ></input>
        <input onChange={handleForm} type="text"  value={form.y10} name="y10"></input>
        <input onChange={handleForm} value={form.ttm}  name="ttm" type="text"></input>
    </div>
  )
}

export default MultipleInputs

It almost work but I am sure there must be multiple better ways to achieve that.

Thanks

Via Active questions tagged javascript - Stack Overflow https://ift.tt/0Zs38Xf