csv-react & react-hook-form

Question

Good evening folks, I am stuck with this code for hours, and I don't understand how to figure it out. I want to retrieve data from the form to convert it into CSV file or Excel table in other words. I used third-party libraries like CSV-react and react-hook-form. I would be grateful if you help me, thank you.

import React from "react";
import { useForm } from "react-hook-form";
import { CSVLink } from "react-csv";


export default function App() {
  const { register, handleSubmit } = useForm();
  const headers = [
    { label: "Address", key: "address" },
    { label: "T-Shirt Size", key: "size" },
    { label: "mail", key: "mail" },
  ];
  let data = [];
 
  const onSubmit = data => {
    console.log(data);
  };
  

   
  return (  
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>Address</label>
      <input {...register("address")} />
      <label>T-Shirt Size</label>
      <select {...register("size")}>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
      </select>
      <label>mail</label>
      <input {...register("mail")} />
      <label>       
        <input type="checkbox" required / >
Agreement to the Data Privacy Policy</label>


     <CSVLink data={data} headers={headers}>
  Download me
     </CSVLink>;
      <input type="submit" />
    </form>

  );
}

Answer 1

So, I find a solution in a forum, and I wanted to share it with you.

  import React, { useState } from "react";
  import { useForm } from "react-hook-form";
  import { CSVLink } from "react-csv";


  export default function App() {
    const { register, handleSubmit } = useForm();
    const [csvData, setCsvData] = useState([])

    const headers = [
      { label: "Address", key: "address" },
      { label: "T-Shirt Size", key: "size" },
      { label: "mail", key: "mail" },
    ];
  
    const onSubmit = data => {
      //console.log(data);
      setCsvData(prev => [...prev, data])
    };
    

    
    return (  
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Address</label>
        <input {...register("address")} />
        <label>T-Shirt Size</label>
        <select {...register("size")}>
          <option value="S">S</option>
          <option value="M">M</option>
          <option value="L">L</option>
          <option value="XL">XL</option>
        </select>
        <label>mail</label>
        <input {...register("mail")} />
        <label>       
          <input type="checkbox" required / >
  Agreement to the Data Privacy Policy</label>


      <CSVLink data={csvData} headers={headers}>
    Download me
      </CSVLink>;
        <input type="submit" />
      </form>

    );
  }