Adding a value from text input using spread operator in ReactJs

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./styles.css";

function App() {
  const { setValue, getValues, register, handleSubmit } = useForm();
  const [inputValue, setInputValue] = useState("");
  const onSubmit = (data) => {
    if (inputValue) setValue("example", [...getValues().example, inputValue]);
    console.log(getValues().example);
  }; // your form submit function which will invoke after successful validation

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {[1, 2, 3].map((v, index) => {
        return (
          <input value={v} type="checkbox" {...register(`example[${index}]`)} />
        );
      })}

      <input
        value={inputValue}
        onChange={(e) => {
          setInputValue(e.target.value);
        }}
      />

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This is my solution. Some changes I made:

1. I only add the input value to the "example" array onSubmit, not onChange.
2. I made the input controlled, giving it a value property inputValue, and setting it in the onChange handler
3. I made use of getValues function, to obtain the current elements of example array. Then I used setValue with the spread operator to add at the end of the array.

Feel free to ask me further questions!

--Ado

Edit 1: turns out I got it wrong, you don't want to add the input value to example every time on submit. Here is my new solution:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./styles.css";

function App() {
  const {  getValues, register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(getValues().example);
  }; // your form submit function which will invoke after successful validation
  const checkboxes = [1, 2, 3];
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {checkboxes.map((v, index) => {
        return (
          <input value={v} type="checkbox" {...register(`example[${index}]`)} />
        );
      })}

      <input
      {...register(`example[${checkboxes.length}]`)}
      />

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);