title: Make an API call with react-csv
body: <p>I am trying to add an option to download data as a CSV file inside my component. However, the below code sometimes prints a garbage character <code>ï»¿</code> and works other times. I don't understand what I am doing wrong here. I tried to follow the example provided here: <a href="https://github.com/react-csv/react-csv#readme" rel="nofollow noreferrer">https://github.com/react-csv/react-csv#readme</a></p>
  <p>Here is my code</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  import {
    Card,
    CardHeader,
    CardTitle,
    DropdownItem,
    DropdownMenu,
    DropdownToggle,
    Table,
    UncontrolledDropdown,
    Progress
  } from &quot;reactstrap&quot;;
  
  import { MoreHorizontal } from &quot;react-feather&quot;;
  import { CSVLink } from &quot;react-csv&quot;;
  
  const Languages = () =&gt; {
    const [data, setData] = useState([]);
    return (
    &lt;Card className=&quot;flex-fill w-100&quot;&gt;
  &lt;CardHeader&gt;
        &lt;div className=&quot;card-actions float-right&quot;&gt;
          &lt;UncontrolledDropdown&gt;
            &lt;DropdownToggle tag=&quot;a&quot;&gt;
              &lt;MoreHorizontal /&gt;
            &lt;/DropdownToggle&gt;
            &lt;DropdownMenu right&gt;
              &lt;DropdownItem&gt;&lt;CSVLink data={data} filename={'my-file.csv'} asyncOnClick={true}
                onClick={(event, done) =&gt; {
                      axios.get(&quot;http://localhost:9091/api/returnIndices&quot;, {
                        params: {
                          view: 'Series',
                          bucket: '3_7',
                          group: 'Ratings',
                          metric: 'Price Return',
                          download: true
                        }
                      }).then((response) =&gt; {
                        const data = response.data.payload;
                        console.log(data);
                        setData(JSON.parse(data));
                        done(false); // REQUIRED to invoke the logic of component
                    });
                  }}&gt;Download me&lt;/CSVLink&gt;&lt;/DropdownItem&gt;
          &lt;/DropdownMenu&gt;
          &lt;/UncontrolledDropdown&gt;
        &lt;/div&gt;
        &lt;CardTitle tag=&quot;h5&quot; className=&quot;mb-0&quot;&gt;
          Languages
        &lt;/CardTitle&gt;
      &lt;/CardHeader&gt;
    &lt;/Card&gt;
  );
  }
  
  export default Languages;
  </code></pre>