How to send a transaction using Ethersjs with data parameter from the frontend?

Question

I want to send a transaction from the front end with some data. Ethersjs docs say the unsignedTransaction.data should be of the type BytesLike. In the frontend I made the HTML input field as text and converting the value into byteslike using ethers.utils.hexlify() I am getting this error:

Uncaught (in promise) Error: invalid hexlify value (argument="value", value="1", code=INVALID_ARGUMENT, version=bytes/5.5.0)
  

What am I doing wrong here? Solidity Function to be called:

    function submitTransaction(
        address _to,
        uint _value,
        bytes memory _data
    ) public onlyOwner {
        uint txIndex = transactions.length;

        transactions.push(
            Transaction({
                to: _to,
                value: _value,
                data: _data,
                executed: false,
                numConfirmations: 0,
                txId:txIndex
            })
        );

        emit SubmitTransactionEvent(msg.sender, txIndex, _to, _value, _data);
    }

Frontend form in react:

          <Form onSubmit={submitTransaction}>
            <br></br>
            <Form.Group className="mb-3" controlId="formBasicPassword">
              <Form.Control value={transactionRecipientAddress} onChange={(e)=> settransactionRecipientAddress(e.target.value)} type="text" placeholder="Enter address to send" />
            </Form.Group>

            <br></br>
            <Form.Group className="mb-3" controlId="formBasicEmail">
              <Form.Control value={transactionWei} onChange={(e)=> settransactionWei(e.target.value)} type="number" placeholder="Enter Eth to send" />
            </Form.Group>

            <br></br>
            <Form.Group className="mb-3" controlId="formBasicPassword">
              <Form.Control value={transactionData} onChange={(e)=> settransactionData(e.target.value)} type="text" placeholder="Enter abi encoded data to send" />
            </Form.Group>

            <br></br>

            <Button variant="outline-dark" size='lg' type="submit">
              Submit Transaction
            </Button>
          </Form>

Answer 1

you can use ethers.utils.formatBytes32String("text value") as unsignedTransaction.data