How to pass an array of numbers using e.target.value and React useState Hooks?

I want to pass a numbers array like [2,4,5,5,3,7,4,7,0,4] into submitNumbers(), I’m trying to update numbers using an onChange event. it works if I pass the whole array without using the useState(). Trying to console.log these constants while running returns not defined.

   function App() {
      
      const [userAccount, setUserAccount] = useState()
      const [amount, setAmount] = useState()
      const [numbers, setNumbersValue] = useState()
      //const numbers = [2,4,5,5,3,7,4,7,0,4]
    
      async function setNumbers() {
        if (typeof window.ethereum !== 'undefined') {
          await requestAccount()
          const provider = new ethers.providers.Web3Provider(window.ethereum);
          const signer = provider.getSigner();
          const contract = new ethers.Contract(Address, Contract.abi, signer);
          const transaction = await contract.submitNumbers(numbers);
          await transaction.wait()
          //fetchNumbers()
        }
      }
    
     return (
    
        <button onClick={e => setNumbers()}>Set Numbers</button>
        <input onChange={e => setNumbersValue(e.target.value)} placeholder="Numbers" />
  );
)
    
export default App;

Answer

Try this for converting your string to array:

import { useEffect, useState } from "react";

export default function App() {
  const [state, setState] = useState([]);
  const onChange = (e) => {
    let value = e.target.value;
    setState(value.split(","));
  };
  useEffect(() => {
console.log(state);
    console.log(state);
    console.log(typeof state);
  }, [state]);
  
  return (
    <div className="App">
      <input onChange={onChange} />
    </div>
  );
}

Note: As you said, you should set the input values like: 1,2,3,4,5,6,…

Edit romantic-maxwell-8vkyk